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";
    }
  }

我很困惑，无法弄清楚如何以一种有效的方式构造我的应用程序，以便在用户登录时显示特定部分，如果用户未登录则显示其他内容，以及如何使其在整个应用程序中持久存在。如果有人可以解释此过程如何工作以了解如何进行，我将不胜感激。我在项目中使用香草JavaScript。

Answer 1

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

我建议您重新使用：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
})

Answer 2

我是否必须在我的JavaScript文件中只有一个onAuthStateChanged（）来保持状态的变化并在其中添加所有HTML元素（如帐户详细信息），还是在每个HTML中添加多个onAuthStateChanged（）是个好主意

每个加载的页面至少需要一个身份验证状态观察者，以便每个页面都可以访问当前用户。没关系。

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

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

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

2 个答案: