Vue.js 在Vue js中不工作的路由上检查身份验证

我正在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()
       

})

---

我认为它在循环中，重定向次数太多了

你是对的。由于

路由器，您的守卫将无限次地推送到登录路径。before每个

方法都会在包括登录在内的每个路径导航中触发。为了避免这种情况，您应该区分需要身份验证的路由和不需要身份验证的路由。您可以通过添加

meta:{requireauth:true，}，

在您想要保护的路由上。这将导致您的路线看起来像：

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

然后，您可以通过添加：

if（to.matched.some（（record）=>record.meta.requireauth））

方法中的

条件来检查您要前往的路由是否需要身份验证。这会使您的防护看起来像：

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

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

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

然后，您可以通过添加：
if（to.matched.some（（record）=>record.meta.requireauth））
方法中的
条件来检查您要前往的路由是否需要身份验证。这会使您的防护看起来像：

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

在您的登录路径上。
我需要一个新问题的帮助现在我收到了这个错误
app.js:50316未捕获（承诺中）导航重复：避免了到当前位置的冗余导航：“/pages/login”。
这告诉您正在尝试导航到当前所在的路径。这可能是因为登录路由仍然受到保护。如果这不是你想要检查这个答案的原因。我不明白，你能举个例子说明我的情况吗？在你的警卫中，如果用户未经身份验证，你告诉vue推送到
“/pages/login”
路由。因此，如果您在登录路径上将
requireAuth
设置为true，它将再次尝试推送到
pages/login
路径。我需要一个新问题的帮助。现在我收到了这个错误
app.js:50316 Uncaught（in promise）navigation复制：避免了到当前位置的冗余导航：“/pages/login”。
，这表示您正在尝试导航到当前所在的同一路线。这可能是因为登录路由仍然受到保护。如果这不是你想要检查这个答案的原因。我不明白，你能举个例子说明我的情况吗？在你的警卫中，如果用户未经身份验证，你告诉vue推送到
“/pages/login”
路由。因此，如果您在登录路径上将
requireauth
设置为true，它将再次尝试推送到
pages/login
路径。