Firebase 9.4.1 和 Javascript 身份验证功能 "onAuthStateChanged" 运行缓慢

Question

我正在学习 Firebase，我正在使用 Javascript 和 Jquery 的最新版本 9.4.1 for Web。我有以下代码，我在其中检查用户当前是否已登录，如果是，则不允许他访问登录页面。同样，如果用户已登录，我也会隐藏“注册”和“登录”按钮并显示“退出”按钮。然而，在我的实验过程中，我发现这些动作执行得相当慢。这意味着如果我尝试访问登录页面然后页面加载将近半秒，在半秒内快速显示页面的所有内容（登录表单和内容）然后决定重定向回索引页。即使是“注册”和“登录”按钮在被隐藏之前显示的时间也差不多，“注销”按钮也需要时间才能显示。为什么会有这些延迟？有什么方法可以消除这些延迟并立即执行操作？

验证码

onAuthStateChanged(auth, (user) => {
  if(user){
    const uid = user.uid;
    (window.location.pathname.split("/").pop() == 'login.php')?location.replace("index.php"):null;
    $(".logout").show();
    $(".login").hide();
    $(".register").hide();
  }
});

Answer 1

当页面加载时，Firebase 尝试从其在本地存储中的信息恢复用户的身份验证状态。这要求它调用服务器以检查凭据，以及诸如帐户是否被禁用之类的事情。此调用需要一些时间，只有在调用完成后，您的 onAuthStateChanged 才会调用结果。

这意味着您看到的短闪很正常，仅靠 Firebase 无法阻止 API。您可以做的一个技巧是自己在本地存储中存储一个小令牌值，然后在页面加载时读取该值以确定用户是否可能进行身份验证。 Michael Bleigh 在他的 Google I/O 演讲 Architecting Mobile Web Apps

中解释了这项技术

虽然你不能在所有情况下用它来防止闪光，但你可以用它来有效地防止大多数用户的闪光。

Firebase 9.4.1 和 Javascript 身份验证功能 "onAuthStateChanged" 运行缓慢

Firebase 9.4.1 and Javscript Authentication function "onAuthStateChanged" works slowly

javascript

jquery

firebase

firebase-authentication