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

Posted 2023-02-22

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

【英文标题】：Nuxt Middleware with Firebase and FirebaseUI: Error: Redirected when going from "/anything" to "/login" via a navigation guard

【发布时间】：2021-02-03 09:36:35

【问题描述】：

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

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

中间件/auth.js

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

我在应用程序中绝对找不到其他重定向......

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

【问题讨论】：

看起来有人在这里为此创建了赏金：lazyfox.io/task/JjV/…

【参考方案1】：

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

---

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

---

这将在下一个major@4

---

目前@3个错误无论是NavigationFailures还是regular Errors都无法区分。

vm.$router.push(to) 之后的天真预期路由应该是to。因此，一旦发生重定向，人们就可以期待一些失败消息。 在修补之前 router.push 成为一个承诺错误被忽略静默。 当前的解决方案是在每次推送时反模式.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))

这将污染重定向到 home

的每个组件

---

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

---

Assumption that redirecting twice is not allowed is wrong.

【讨论】：

感谢您的回复，并且确实看到了您的回答。然而，这似乎不适用于 Nuxt 中间件。我可能是错的。但我无法从中间件访问this。关于如何从全局 nuxt 中间件处理这个问题的任何想法？谢谢。

@Brad 传递给中间件的参数是你的this，上面我解释说你的错误是由于重定向造成的。基本上，您将（1）路由到您的备忘单，但由于您未通过身份验证，您将被重新路由（2）以登录。这样你的第一步就抛出了。

我明白问题在于双重重定向。我想真正困扰我的是这似乎是一项非常基本的任务（导航守卫），而 nuxt 中的中间件是执行此操作的“nuxt”方式。为什么我在网上看不到更多关于这个问题的信息，而它似乎基本上会影响所有 nuxt 用户？此外，我不知道如何在这种情况下以合理和实用的方式修复它。因为我想保护路线没有错误并且不在每个文件中都这样做。我是 nuxt 的新手，对 Vue 还很陌生，所以我的建议没有成功。谢谢

@Brad 我不知道你是如何初始化你的路由转换的，你只知道你使用了重定向，默认情况下使用 nuxt-link 扩展自 router-link，这将消除重定向错误。你的问题是你从哪里开始你的路由，它期望你的最终路由是cheatsheets，而是得到login——从你提供的信息中我无法判断你在做什么不同，但我猜你会做一些不同的事情。我愿意帮助你。请告诉我们你是如何开始路由的；）

我非常感谢您的善意和乐于助人的意愿。我不确定如何回应我如何开始路由。在 Nuxt 中，路由器默认被神奇地管理，我将上面的代码作为“中间件”接入路由器。