Firebase 9如何保存认证会话 实现页面刷新后用户不登出

你的代码有三个核心错误，导致持久化不生效：

• setPersistence 方法执行成功后不会返回用户对象，你在回调里直接解构 { user } 会拿到undefined，后续读取用户属性直接抛错，登录流程根本没有正常执行。对照官方示例就能看到，这个then回调没有任何入参，它的作用只是修改持久化配置，和登录操作、用户数据无关。
• 持久化类型选择不符合需求：browserSessionPersistence 是标签页会话级存储，仅在当前标签页打开期间生效，关闭标签页就会清空认证数据。如果要实现刷新页面、甚至关闭浏览器重新打开都保持登录，需要使用 browserLocalPersistence。
• 缺少全局认证状态监听：Firebase 会自动把认证信息存在对应存储里，刷新页面时会异步恢复用户凭证，但你没有在应用初始化阶段监听这个恢复过程，你自己的全局状态（比如dispatch对应的Redux/Context状态）在刷新后会重置为空，自然表现为自动退出登录。

1. 修正登录逻辑 #

严格按照「先设置持久化配置 → 再执行登录 → 登录成功后同步用户状态」的顺序写代码，不要提前读取不存在的用户数据：

import { getAuth, setPersistence, browserLocalPersistence, signInWithEmailAndPassword } from "firebase/auth";

const signUp = async (loginEmail, loginPassword) => {
  const auth = getAuth();
  try {
    // 先设置持久化模式，要关浏览器也保留登录就用browserLocalPersistence
    // 只需要当前标签页刷新不丢登录就换成browserSessionPersistence
    await setPersistence(auth, browserLocalPersistence);
    // 持久化配置生效后再调用登录方法
    const userCredential = await signInWithEmailAndPassword(auth, loginEmail, loginPassword);
    const user = userCredential.user;
    // 登录成功后再把用户信息同步到自己的全局状态
    dispatch(
      setUser({
        email: user.email,
        id: user.uid,
        token: user.accessToken,
      })
    );
  } catch (error) {
    console.log("登录失败：", error.message);
  }
}

2. 在应用入口添加认证状态监听 #

这是解决刷新后丢登录态的核心步骤，必须在应用最开始加载的文件（比如main.jsx/App.jsx）里添加如下代码，确保页面刷新后能把Firebase自动恢复的用户信息同步到你自己的状态管理里：

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
// 监听认证状态变化，页面刷新、登录、登出时都会自动触发
onAuthStateChanged(auth, (user) => {
  if (user) {
    // 用户已登录，同步用户信息到全局状态
    dispatch(
      setUser({
        email: user.email,
        id: user.uid,
        token: user.accessToken,
      })
    );
  } else {
    // 用户未登录，清空全局的用户状态
    dispatch(clearUser());
  }
});

补充说明：所有登录态判断逻辑都要以onAuthStateChanged回调返回的结果为准，不要只依赖登录接口调用成功后存的状态，否则页面初始化的异步恢复阶段会出现登录态判断错误。

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