vue.js - 我可以一个接一个地使用多个相同的路由守卫吗？

Question

例如，

router.beforeEach((to, from, next) => {
    ...
    ...
})
router.beforeEach((to, from, next) => {
    ...
    ...
})

官方文档说：

每当触发导航时，按创建顺序调用守卫之前的全局。

在警卫在这里是复数之前。但是当我使用多个之前的守卫时，只有第一个被调用，而其他的被跳过。

问题不仅与 beforeEach 有关，还与所有导航守卫有关。

带有 2 beforeEach 的代码不起作用：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Logon' && !localStorage.getItem('authToken')) {
    next({ name: 'Logon' })
  } else next()
})

router.beforeEach((to, from, next) => {
  if (to.name !== 'Logon' && localStorage.getItem('authToken')) {
    next({ name: 'Homepage' }) //тут будет логика проверки токена на сервере
  } else next()
})

标签： vue.jsvue-router

Answer 1

这目前不受支持，似乎也不会支持。线程中提到了一些解决方法，例如在单个警卫中调用多个警卫

https://github.com/vuejs/vue-router/issues/721