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 中解釋了這種技術

雖然您不能在所有情況下都使用此方法來防止閃光，但您可以使用它來有效地防止大多數用戶出現閃光。