如何在 vue 上处理 Firebase 身份验证

Posted 2023-02-16

【中文标题】如何在 vue 上处理 Firebase 身份验证

【英文标题】：How to handle firebase authentication on vue

【发布时间】：2021-05-10 13:29:35

【问题描述】：

我正在处理一个 vuejs 项目，并且正在使用 firebase oauth 身份验证。 我已经实现了弹出式登录和身份验证状态更改事件监听器，效果很好。

问题是，在我登录后，当我刷新/首次加载应用程序时，由于身份验证会话持续存在，应用程序加载和身份验证状态更改被触发之间存在时间跨度，因此即使我已登录在，在触发事件之前我会看到登录屏幕几秒钟，然后我被重定向到主页

例如

我打开应用程序 由于我没有通过身份验证，我被重定向到/login 我看到了登录屏幕 我使用 google 提供程序和弹出窗口登录 我被重定向到主页/ 我刷新页面 我被重定向到/login 由于我已经通过身份验证，authStateChange 事件触发，我被重定向到主页，但这会在几秒钟后发生

有什么方法可以处理之前的状态以显示“正在加载...”之类的？我一直在阅读文档，但我发现唯一的事情是使用我已经在使用的事件监听器

提前谢谢大家！

【问题讨论】：

查看tutorial 的“在页面重新加载时处理用户状态”部分。

是的，这就是我一直在做的事情，我关注的是页面加载和身份验证状态更改之间的时间跨度。在身份验证状态更改之前，我看到登录屏幕，我想知道是否有办法知道用户是否会通过身份验证，以便我可以显示“正在加载”标签或其他内容。我还在努力寻找解决方案，如果我有东西我会在这里发布

【参考方案1】：

好的，这是我提供的解决方案：

在用户真正登录并触发 authStateChange 事件之前，无法知道用户是否已经登录。所以我能做的最好的事情是，当用户登录到应用程序时，我在 localStorage 中存储一个“EXPECT_LOGIN”值，所以如果我重新加载应用程序，并且该值是真的，我会显示一个超时的“登录”消息例如，5 秒。这里我们有两种可能：

触发事件，用户自动登录 超时，我将“EXPECT_LOGIN”值设置为False，然后让用户手动登录