Firebase保持跟踪是否已通过用户身份验证

Question

我试图弄清楚，无论用户是否登录，如何保持我的应用程序的全局状态。 我必须在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";
    }
  }

我非常困惑，不知道如何以如此有效的方式构建我的应用程序，以便在用户被记录时显示特定部分，而在用户未被记录时显示其他内容，以及如何使其在整个应用程序中持久化。 如果有人能解释这个过程是如何运作的，以便理解如何进行，我将不胜感激。 我在这个项目中使用了vanilla JavaScript。

Answer 1

您需要某种应用程序状态。

我建议您redux:https://redux.js.org/

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

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
})