时间戳

首页 > 解决方案 > 如何在 vue 上处理 Firebase 身份验证

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

问题描述

我正在使用 vuejs 项目，并且正在使用 firebase oauth 身份验证。我已经使用弹出流实现了登录，以及身份验证状态更改事件侦听器，它工作得很好。

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

例如

  1. 我打开应用程序
  2. 由于我没有通过身份验证，我被重定向到/login
  3. 我看到登录屏幕
  4. 我使用谷歌提供商和弹出窗口登录
  5. 我被重定向到主页/
  6. 我刷新页面
  7. 我被重定向到/login
  8. 由于我已经通过身份验证，authStateChange事件触发并且我被重定向到主页，但这会在几秒钟后发生

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

提前谢谢大家！

标签： firebasevue.jsvuejs2firebase-authentication

解决方案

好的，这是我带来的解决方案：

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

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

推荐阅读