时间戳

首页 > 解决方案 > 检查在 Vue js 中不起作用的路由上的 Auth

vue.js - 检查在 Vue js 中不起作用的路由上的 Auth

问题描述

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

})

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

标签： vue.jsvuejs2vuexvue-router

解决方案

你说的对。您的警卫无限次推送到登录路线，因为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,
},

在您的登录路线上。

推荐阅读