Javascript 如果用户经过身份验证，Firebase将保持跟踪

我试图弄清楚，无论用户是否登录，如何保持应用程序的全局状态。我的JavaScript文件中是否只需要一个

onAuthStateChanged（）

，就可以跟踪状态更改并在其中添加所有HTML元素，如帐户详细信息，还是在每个HTML文件中添加多个

onAuthStateChanged（）

，并添加类似的内容

  auth.onAuthStateChanged(function (user) {
    if (user) {
      document.getElementById("user-header-username").textContent = `Hi ${user.displayName}`;
    } else {
      document.getElementById("user-header-username").textContent = "Sign in";
    }
  }

我非常困惑，无法理解如何以如此有效的方式构造我的应用程序，以便在用户登录时显示特定部分，如果用户未登录时显示其他部分，以及如何使其在整个应用程序中持久化。如果有人能解释一下这个过程是如何进行的，我将不胜感激。

---

我在项目中使用香草JavaScript。

您需要某种应用程序状态

我建议你重做：

使用Redux，您的代码将如下所示（伪代码）：

我的JavaScript文件中必须只有一个onAuthStateChanged（）才能跟踪状态更改并在其中添加所有HTML元素（如帐户详细信息），还是在每个HTML文件中添加多个onAuthStateChanged（）是一个好主意

为了使每个页面能够访问当前用户，每个加载的页面至少需要一个身份验证状态观察者。这很正常

如果出于任何原因，每页需要多个观察者，也可以。由您决定哪些代码最能满足应用程序的需要

观察者的主要目的是在已知用户已登录时通知您（页面加载时不会立即发生）。它还会告诉您用户是否已注销。你如何处理这些事件取决于你自己

auth.onAuthStateChanged(function (user) {
  if (user) {
      store.dispatch("user-logged-in", user)
    } else {
      store.dispatch("user-logged-out")
    }
  }

store.subscribe("user-logged-in", (user) => {
  document.getElementById("user-header-username").textContent = `Hi ${user.displayName}`;
  // other side effects
})

store.subscribe("user-logged-out", () => {
  document.getElementById("user-header-username").textContent = "Sign in";
  // other side effects
})