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，并且在该页面上您会再次被发送。我在我的应用程序中以不同方式处理此问题，但使用您的代码，您可以添加一种方法来检查页面来自何处，在您的路线中使用 from 对象。

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

示例：

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

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