Firebase onAuthStateChanged 不断刷新

Question

我正在使用 JavaScript 中的 Firebase。

我使用onAuthStateChanged函数检查用户是否登录，然后重定向到相应的html页面。

auth.onAuthStateChanged((user) => {
    if(user) {
        // Logged in
        console.log("logged in!");
        window.location.href = "dashboard.html";
        fetchFromDB();
    } else {
        console.log("Logged out!");
        //window.location.href = "index.html";
    }
});

但是，它会不断刷新页面，就像处于无限循环中一样。我不确定在这里做什么。

非常感谢您的帮助:)

Answer 1

页面加载后，Firebase开始从浏览器的本地存储中恢复已登录的用户。这需要调用服务器（a.o. 以查看帐户是否已被删除/禁用），这需要一些时间。

所以最初你的onAuthStateChanged 被null 调用，因为没有当前用户。然后，当恢复身份验证状态时，会再次使用用户配置文件调用侦听器。

我猜你在最初的null 中采取了一些行动（比如重定向到index.html），然后当目标页面获得用户个人资料时重定向回dashboard.html。

---

在单页应用程序中使用 Firebase 是最简单的，因为在这种情况下您只会加载一个页面。但如果您有多个页面，则需要编写等待身份验证状态稳定的代码。

我知道的一些常用方法：

1. 忽略您的onAuthStateChanged 回调获得的初始null。但请记住，用户状态可能不可恢复，在这种情况下，null 就是您所获得的全部，因此您可能需要在一段时间后采取行动。
2. 设计您的流程，以便您最终到达正确的位置。这可能只适用于单页应用程序，但我最常使用这个：当页面加载时（用户是null），我会显示一个登录屏幕。然后，当用户配置文件恢复时，我导航到仪表板。这意味着用户可能会短暂地看到登录屏幕，但我不觉得这太让人分心。如果您这样做，请继续阅读...
3. 您可以在用户登录时自己在本地存储中存储一个值。然后在页面重新加载时，您可以检查该值以及它是否存在：假设恢复了他们的身份验证状态将成功，并首先显示仪表板。如果登录失败，您可以在超时后重定向回登录屏幕。因此，这会反转 #2 的路径，并且需要相当多的工作，但会删除返回用户的临时登录屏幕。