Firebase 跟踪用户是否经过身份验证答案

【问题标题】：Firebase keep track if is user authenticatedFirebase 跟踪用户是否经过身份验证
【发布时间】：2020-07-15 14:31:08
【问题描述】：

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

【问题讨论】：

标签： javascript html firebase firebase-authentication

【解决方案1】：

我是否必须在我的 JavaScript 文件中只有一个 onAuthStateChanged() 来跟踪状态更改并在其中添加所有 HTML 元素，例如帐户详细信息，或者在每个 HTML 中添加多个 onAuthStateChanged() 是个好主意

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

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

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

【讨论】：

【解决方案2】：

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

建议你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
})

【讨论】：