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