时间戳

首页 > 解决方案 > 带有 Firebase 和 FirebaseUI 的 Nuxt 中间件：错误：通过导航守卫从“/anything”转到“/login”时重定向

firebase - 带有 Firebase 和 FirebaseUI 的 Nuxt 中间件：错误：通过导航守卫从“/anything”转到“/login”时重定向

问题描述

Nuxt SSR 应用使用 FirebaseUI 来处理身份验证流。登录和退出工作完美。当我添加中间件以检查身份验证状态并在未登录时重定向时，我收到此错误：

错误：通过导航守卫从“/list-cheatsheets”转到“/login”时重定向。

中间件/auth.js

export default function ({ store, redirect }) {
    // If the user is not authenticated
    if (!store.state.user) {
      return redirect('/login')
    }
  }

绝对没有其他重定向，我可以在应用程序中找到......

我一直在挖掘和尝试几个小时。我发现其他遇到此错误的人没有使用 Nuxt，并且这些解决方案都不起作用。

标签： firebasevue.jsnuxt.jsvuexfirebaseui

解决方案

由于有赏金不能将其标记为重复，因此后续是我在Redirecting two in a single Vue navigation 中的答案的副本

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

这将在下一个主要的@4中更改

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

之后的天真预期路线vm.$router.push(to)应该是to。因此，一旦发生重定向，人们就可以期待一些失败消息。在将 router.push 修补为 Promise之前，该错误被静默忽略。当前的解决方案是.catch(...)在每次推送时都对 a 进行反模式，或者预测设计中的更改并将其包装以暴露失败的结果。

未来的计划是将这些信息放入结果中：

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

Imo 这个错误只是设计使然，应该处理：

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 {

}

这可以防止未捕获的承诺。

在不重定向两次的情况下支持这一点意味着您将警卫放在出口处：

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

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

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

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

推荐阅读