React页面刷新后会话丢失问题求助

你的代码仅通过storage事件触发登录状态检查，但该事件仅在其他浏览器标签页修改sessionStorage时才会触发，当前页面刷新时并不会触发这个事件。因此页面刷新后，组件挂载阶段没有主动读取sessionStorage中的token，导致isAuthenticated维持初始值，出现会话状态丢失的问题。

修改useEffect，在组件挂载时主动执行一次状态检查，同时保留跨标签页的storage事件监听：

useEffect(() => {
  const checkAuthToken = () => {
    const token = sessionStorage.getItem('auth-token');
    setIsAuthenticated(!!token); // 简化布尔值判断逻辑
  };

  // 组件挂载时立即执行一次检查
  checkAuthToken();

  window.addEventListener('storage', checkAuthToken);

  return () => {
    window.removeEventListener('storage', checkAuthToken);
  };
}, []);

既然基于Firebase开发，更可靠的方式是使用Firebase Auth官方提供的onAuthStateChanged监听，它会自动处理页面刷新、token过期、用户登录/登出等场景，无需手动管理sessionStorage：

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

useEffect(() => {
  const auth = getAuth();
  // 订阅认证状态变化
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    setIsAuthenticated(!!user);
    // 若仍需将token存入sessionStorage，可在此处获取：
    // if (user) {
    //   user.getIdToken().then(token => sessionStorage.setItem('auth-token', token));
    // } else {
    //   sessionStorage.removeItem('auth-token');
    // }
  });

  // 组件卸载时取消订阅
  return unsubscribe;
}, []);

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