Firebase V9 JavaScript中获取授权用户及页面切换状态丢失问题

问题根源是页面切换后，JS内存中的authUser变量会被重新初始化——每个页面加载都是独立的JS上下文，无法跨页面共享内存变量。以下是具体解决思路：

1. 每个页面通过onAuthStateChanged重新监听登录状态 #

Firebase Auth默认会将用户状态持久化到本地存储，所以在新页面加载时，重新调用onAuthStateChanged就能获取到当前登录用户，无需依赖之前页面的变量。

比如在users.html对应的JS文件中添加校验逻辑：

import { auth, onAuthStateChanged } from './firebase.js';

// 页面加载时立即监听用户状态
onAuthStateChanged(auth, (user) => {
  if (!user) {
    // 未登录则跳转首页
    window.location.replace("index.html");
  } else {
    // 已登录，执行展示数据库的逻辑
    renderDatabaseContent();
  }
});

2. 避免依赖内存变量做登录校验 #

不要用authUser变量判断登录状态，直接通过Firebase提供的auth.currentUser或监听回调来校验。注意auth.currentUser在页面刚加载时可能为null（Firebase需要时间从本地存储恢复状态），所以优先用onAuthStateChanged确保状态就绪。

修改跳转按钮的校验逻辑：

showUsers.addEventListener("click", () => {
  if (auth.currentUser) {
    window.location.replace("users.html");
  } else {
    modalVisible("Need to login", isError());
  }
});

3. 可选：用本地存储辅助共享用户信息（需注意安全） #

如果需要在页面间快速获取用户邮箱等非敏感信息，可以将其存入localStorage，但必须配合Firebase的官方状态校验（防止本地存储被篡改）：

在监听回调中存储：

onAuthStateChanged(auth, (user) => {
  if (user) {
    localStorage.setItem('userEmail', user.email);
  } else {
    localStorage.removeItem('userEmail');
  }
});

在其他页面读取：

const storedEmail = localStorage.getItem('userEmail') || "";
// 但必须再次通过Firebase校验状态
onAuthStateChanged(auth, (user) => {
  if (!user) {
    window.location.replace("index.html");
  }
});

内容的提问来源于stack exchange，提问作者Wyse