Firebase onAuthStateChanged 一直刷新

Question

我在 JavaScript 中與 Firebase 合作。

我使用 onAuthStateChanged function 檢查用戶是否登錄，然后重定向到相應的 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開始從瀏覽器的本地存儲恢復登錄用戶。 這需要調用服務器（ao 以查看帳戶是否已被刪除/禁用），這需要一些時間。

所以最初你的onAuthStateChanged被null調用，因為沒有當前用戶。 然后，當身份驗證 state 恢復時，再次使用用戶配置文件調用偵聽器。

我猜你在最初的null中采取了一些行動（比如重定向到index.html ），然后目標頁面重定向回dashboard.html當它獲取用戶配置文件時。

---

在單頁應用程序中使用 Firebase 是最簡單的，因為在這種情況下您只有一個頁面加載。 但是，如果您有多個頁面，則需要編寫等待身份驗證 state 解決的代碼。

我知道的一些常見方法：

1. 忽略您的onAuthStateChanged回調獲得的初始null 。 但請記住，用戶 state可能無法恢復，在這種情況下null就是您所得到的，因此您可能需要在一段時間后采取行動。
2. 設計您的流程，以便您最終到達正確的位置。 這可能只適用於單頁應用程序，但我最常使用這個：當頁面加載時（並且用戶是null ），我會顯示一個登錄屏幕。 然后，當用戶配置文件恢復時，我導航到儀表板。 這意味着用戶可能會短暫地看到登錄屏幕，但我不覺得這太讓人分心。 如果你這樣做，請繼續閱讀...
3. 當用戶登錄時，您可以自己在本地存儲中存儲一個值。然后在頁面重新加載時，您可以檢查該值以及它是否存在：假設他們的授權 state 的恢復將成功，並首先顯示儀表板。 如果登錄失敗，您可以在超時后重定向回登錄屏幕。 因此，這會反轉 #2 的路徑，並且需要相當多的工作，但會刪除返回用戶的臨時登錄屏幕。

Answer 2

在這里，如果您正在使用react ，這可能會起作用。

useEffect(() => {
onAuthStateChanged(auth, (currentUser) => {
  setUser(currentUser);
  console.log("user Changed");
})}, [])

onAuthStateChanged在每次重新渲染組件時運行，因此useEffect在這種情況下會有所幫助。