vue.js - Navigation Guards beforeEach 无限循环

Question

尝试使用导航守卫，但 next('/auth/login') 给出无限循环:

router.beforeEach((to, from, next) => {
  auth.validate().then((valid) => {
    if (!valid) {
      next('/auth/login')
    } else {
      next()
    }
  })
})

路由器已定义:

const router = new Router({
  routes: [
    {
      name: 'login',
      path: '/auth/login',
      component: login
    }
})

Answer 1

在我看来，当您的身份验证无效时，您的路由器会将您发送到 /auth/login 并在该页面上再次发送您。我在我的应用程序中以不同的方式处理这个问题，但是使用您的代码，您可以添加一种方法来检查页面的来源，在您的 route 使用 from 对象。

您需要检查当前路由是否为 /auth/login 然后忽略不重定向。

例子:

 if (!valid && from.path !== '/auth/login') {}

这不会重定向回/auth/login，因为您来自该页面。