在 Vue js 中不工作的路由上检查 Auth

Question

我正在 vue 路由上添加身份验证，但它没有重定向回登录页面。

给出这个错误

Error: Navigation cancelled from "/" to "/pages/login" with a new navigation.

这是我在路线上应用它的方式

router.beforeEach((to, from, next) => {

  

    // If auth required, check login. If login fails redirect to login page

    if (!(auth.isAuthenticated())) {

        router.push({ path: '/pages/login', name: 'page-login', component: '@/views/pages/login/Login.vue' })
       

    }

    return next()
       

})

我认为它在循环中并且重定向了太多次

Answer 1

你是对的。你的守卫无限次地推送到登录路由，因为 router.beforeEach 方法在包括登录在内的每个路由导航中都会被触发。为避免这种情况，您应该区分需要身份验证的路由和不需要身份验证的路由。您可以通过添加 meta: {requiresAuth: true,},在你要守卫的路线上。这导致您的路线看起来像：

{
  path: '/',
  component: Home,
  meta: {
    requiresAuth: true,
  },
}

然后，您可以通过在 beforeEach 方法中添加：if (to.matched.some((record) => record.meta.requiresAuth)) 条件来检查您前往的路线是否需要身份验证。这导致你的守卫看起来像：

router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (!(auth.isAuthenticated())) {
      router.push({ path: '/pages/login', name: 'page-login', component: '@/views/pages/login/Login.vue' })
    }
  } else {
    next()
  }
})

这将让您仅检查所需路由的身份验证，您可以通过添加

来打破无限循环

meta: {
  requiresAuth: false,
},

在您的登录路径上。

在 Vue js 中不工作的路由上检查 Auth

Check Auth on routes not working in Vue js

vue.js

vue-router

vuex

vuejs2