检查在 Vue js 中不起作用的路由的身份验证

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,
  },
}

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

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,
},

在您的登录路线上。