vue.js - 在单个Vue导航中重定向两次

Question

在我的Vue应用中，用户的主页取决于他们的角色。为了确保向用户显示正确的首页，我使用了此导航防护:

export default (to, from, next) => {
  const authService = getAuthService()

  if (to.path === '/') {
    // if they've requested the home page, send them to 
    // different pages depending on their role
    if (authService.isUser()) {
      next({ name: 'events' })

    } else if (authService.isAdmin()) {
      next({ name: 'admin-events' })

    } else {
      next()
    }
  }
}

然后，当用户成功登录时，我将其重定向到 '/'

  this.$router.push({path: '/'))

上方的导航 guard 将他们重定向到特定于角色的主页。但是，在单个导航操作 is not allowed的过程中重定向两次，并导致在第二次重定向发生时在控制台中出现以下错误(在导航 guard 中)
`

Uncaught (in promise) Error: Redirected when going from "/login" to "/" via a navigation guard.

在我的应用中发生这种情况的另一种情况是404组件，它处理访问不存在的路由的尝试，即

用户尝试访问无效的路由

404组件重定向回'/'

导航 guard 重定向到用户特定的主页，从而导致错误

有没有一种方法可以支持这些用例而无需两次重定向？

Answer 1

tldr:vm.$router.push(route)是一个 promise ，需要.catch(e=>gotCaught(e))错误。

这将在下一个major @ 4 中进行更改

当前@ 3错误无法区分，无论是NavigationFailures还是regular Errors。vm.$router.push(to)之后的天真预期路由应为to。因此，一旦存在重定向，就可以期待一些失败消息。 在将 router.push修补为 promise 之前，该错误被默默地忽略。
当前的解决方案是在每次推送时对.catch(...)进行反模式化，或者预测设计中的更改并将其包装起来以暴露出失败的结果。
将来的计划是将这些信息放入结果中:

  let failure = await this.$router.push(to);
  if(failure.type == NavigationFailureType[type]){}
  else{}

Imo这个错误只是由 design引起的，应该处理:

hook(route, current, (to: any) => { ... abort(createNavigationRedirectedError(current, route)) ...}

因此，基本上，如果 to包含重定向，那就是错误，这等同于将 vm.$router.push用作防护。
要忽略未处理的错误行为，可以传递一个空的onComplete(在将来的版本中会发生中断):

vm.$router.push(Route, ()=>{})

或将其包装在 try .. catch中

try {

  await this.$router.push("/")
} catch {

}

这可以防止 promise to throw uncaught。

要支持此操作而无需重定向两次，则意味着您将防护措施放到了导出处:

let path = "/"
navguard({path}, undefined, (to)=>this.$router.push(to||path))

这会污染重定向到 主页的每个组件

顺便说一句 router-link组件 uses an empty onComplete

Assumption that redirecting twice is not allowed is wrong.