在单个 Vue 导航中重定向两次 [英] Redirecting twice in a single Vue navigation

问题描述

在我的 Vue 应用中，用户的主页取决于他们的角色.为了确保向用户显示正确的主页，我使用了这个导航守卫:

In my Vue app, a user's homepage depends on their role. To ensure that a user is shown the correct homepage, I use this navigation guard:

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()
    }
  }
}

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

Then when a user successfully logs in, I redirect them to '/'

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

和上面的导航守卫将他们重定向到他们特定于角色的主页.但是，在单个导航操作过程中重定向两次是不允许的，并导致以下错误出现在控制台中第二次重定向发生(在导航守卫中)`

and the nav guard above redirects them to their role-specific homepage. However, redirecting twice in the course of a single navigation action is not allowed and causes the following error to appear in the console when the second redirection occurs (in the nav guard) `

未捕获(承诺)错误:在通过导航守卫从 "/login" 转到 "/" 时重定向.

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

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

Another case in my app where this happens is the 404 component that handles attempts to access non-existent routes, i.e.

1. 用户尝试访问无效路由
2. 404 组件重定向回 '/'
3. 导航守卫重定向到用户特定的主页，导致错误

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

Is there a way I can support these use cases without redirecting twice?

推荐答案

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

tldr: vm.$router.push(route) is a promise and needs to .catch(e=>gotCaught(e)) errors.

这将在下一个 主要@4

This will be changed in the next major@4

目前不区分@3个错误是NavigationFailures还是regular Errors.

Currently@3 errors are not distinguished whether they are NavigationFailures or regular Errors.

vm.$router.push(to) 之后的幼稚预期路由应该是 to.因此，一旦发生重定向，就可以期待一些失败消息.在修补之前 router.push 是一个承诺错误被忽略默默.当前的解决方案是在每次推送时使用 .catch(...) 反模式，或者预测设计中的更改并将其包装起来以暴露失败结果.

The naive expected route after vm.$router.push(to) should be to. Thus one can expect some failure message once there was a redirect. Before patching router.push to be a promise the error was ignored silently. The current solution is to antipattern a .catch(...) onto every push, or to anticipate the change in design and wrap it to expose the failure as result.

未来计划将这些信息放入结果中:

Future plans have it to put those informations into the result:

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

---

我觉得这个错误只是由设计 并且应该处理:

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

所以基本上如果 to 包含一个重定向它是一个错误，这有点等同于使用 vm.$router.push 进入一个守卫.

So basically if to contains a redirect it is an error, which kinda is equal to using vm.$router.push into a guard.

要忽略未处理的错误行为，可以传递一个空的 onComplete(在未来版本中中断):

To ignore the unhandled error behaviour one can pass an empty onComplete (breaks in future releases):

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

或将其包裹在 try .. catch

try {

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

}

这会阻止 承诺未捕获.

支持这一点而不重定向两次意味着你把守卫放在你的出口:

to support this without redirecting twice means you put the guard to your exit:

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

这将污染重定向到home

顺便说一下 router-link 组件 使用空的 onComplete

假设不允许重定向两次是错误的.

这篇关于在单个 Vue 导航中重定向两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！