React应用Firebase身份验证状态在页面刷新后丢失问题排查求助

问题核心原因 #

你在firebase.js的顶层直接调用了createUserWithEmailAndPassword、signInWithEmailAndPassword、signOut三个鉴权方法，且定义的email、password变量都是未赋值的undefined。每次刷新页面时所有模块会重新加载导入，这段顶层代码会自动执行：参数错误的鉴权操作+直接调用登出方法，会直接清除Firebase存储在localStorage的会话信息。而客户端路由跳转不会重新加载页面，也就不会触发这段错误代码执行，所以跳转不会丢失会话。

修复步骤 #

1. 修正firebase.js代码，移除顶层的无用方法调用，调整持久化配置逻辑，补全缺失的初始化内容：

import { initializeApp } from 'firebase/app';
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, setPersistence, browserLocalPersistence } from 'firebase/auth';
// 如果用到云数据库就补全下面的导入，没用到就删掉导出里的db
// import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  // 保留你自己的项目配置
};

const app = initializeApp(firebaseConfig);

// Auth初始化
const auth = getAuth(app);
// 没用到db就删掉下面这行和导出里的db
// const db = getFirestore(app);

// 持久化配置单独设置即可，增加错误捕获方便排查问题
setPersistence(auth, browserLocalPersistence).catch(err => {
  console.error("持久化设置失败：", err);
});

// 不要在顶层直接调用登录/注册/登出方法，这些方法要在业务逻辑的回调里触发
// 删掉原来顶层的createUserWithEmailAndPassword、signInWithEmailAndPassword、signOut调用

export {
  auth,
  // 没用到db就删掉
  // db,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut
};

2. 调整登录/注册逻辑调用时机
   比如在Login组件的登录按钮点击回调里，再调用登录方法：

// Login组件内示例
import { signInWithEmailAndPassword, auth } from './firebase.js';

// 登录按钮点击事件
const handleLogin = async () => {
  // 从表单获取用户输入的邮箱密码
  const email = 表单输入的邮箱值;
  const password = 表单输入的密码值;
  try {
    await signInWithEmailAndPassword(auth, email, password);
    // 登录成功跳转到首页
  } catch (err) {
    console.error("登录失败：", err);
  }
}

3. 新增登录状态监听
   不要直接读取localStorage里的firebase:authUser判断登录状态，使用Firebase官方提供的状态监听方法，在App初始化时执行即可自动恢复会话：

// 比如在App.js里新增监听
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from './firebase.js';
import { useEffect, useState } from 'react';

function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 监听auth状态变化，Firebase会自动从localStorage恢复会话
    const unsub = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setLoading(false);
    });
    return () => unsub();
  }, []);

  if (loading) return <div>加载中...</div>;

  // 后续可以用user变量判断登录状态，做路由拦截等逻辑
  return (
    // 保留你原来的App代码
  )
}

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