Firebase 9.4.1 和 Javscript 身份验证功能“onAuthStateChanged”运行缓慢

Question

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

认证校验码

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 talk Architecting Mobile Web Apps 中解释了这种技术

虽然您不能在所有情况下都使用此方法来防止闪光，但您可以使用它来有效地防止大多数用户出现闪光。