Laravel Sanctum/Vuex 未捕获错误 Vue Router Navigation Guard

Posted 2023-03-14

【中文标题】Laravel Sanctum/Vuex 未捕获错误 Vue Router Navigation Guard

【英文标题】：Laravel Sanctum/Vuex Uncaught Error Vue Router Navigation Guard

【发布时间】：2021-04-21 10:48:17

【问题描述】：

任何人都可以就这个问题提出建议吗？

我有一个带有 Vue 前端的 Laravel 应用程序，它使用 Laravel Sanctum 连接到 API。 （在同一个应用程序中）我正在尝试设置身份验证保护，因此只有在使用 API 进行身份验证后才能访问路由。

我正在像这样通过状态操作进行连接：

      async getAuthenticatedUser( commit , params) 
          await axios.get('api/auth-user',  params )
              .then(response => 
                  commit('SET_AUTHENTICATED', true)
                  commit('SET_AUTHENTICATED_USER', response.data)
                  localStorage.setItem('is-authenticated', 'true')

                  return Promise.resolve(response.data)
              )
              .catch(error => 
                  commit('SET_AUTHENTICATED', false)
                  commit('SET_AUTHENTICATED_USER', [])
                  localStorage.removeItem('is-authenticated')

                  return Promise.reject(error.response.data)
              )
      ,

状态认证属性设置如下：

const state = () => (
      authenticated: localStorage.getItem('is-authenticated') || false,
      authUser: [],
  )

我有以下警卫检查身份验证。如果我没有正确登录，当我访问具有 requiresAuth 属性的路由时，应用程序会将我重定向回登录屏幕。

但是当我尝试登录时，我收到Redirected when going from "/login" to "/dashboard" via a navigation guard.

router.beforeEach((to, from, next) => 
  if (to.matched.some((record) => record.meta.requiresAuth)) 
    if (store.getters["Auth/isAuthenticated"]) 
      next()
      return
    
    next('/login')
  

  if (to.matched.some((record) => record.meta.requiresVisitor)) 
    if (! store.getters["Auth/isAuthenticated"]) 
      next()
      return
    
    next('/dashboard')
  

  next()
)

【参考方案1】：

如果可以安全忽略，并且您使用的是 vue-router ^3.4.0，您可以这样做：

import VueRouter from 'vue-router'

const  isNavigationFailure, NavigationFailureType  = VueRouter
...
this.$router.push(fullPath).catch(error => 
  if (!isNavigationFailure(error, NavigationFailureType.redirected)) 
    throw Error(error)
  
)