Firebase认证用户刷新后会话丢失，私有路由跳转登录问题求助

问题核心是页面刷新时，Firebase Auth需要异步恢复用户会话，此时projectAuth.currentUser初始为null，直接用它判断会误判为未登录，导致跳转到登录页。以下是具体解决方案：

步骤1：创建Auth状态监听Hook #

通过Firebase的onAuthStateChanged监听用户状态变化，等待会话恢复完成：

// hooks/useAuth.js
import { useState, useEffect } from 'react';
import { projectAuth } from '../firebase';

export const useAuth = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 订阅Auth状态变化，页面刷新时Firebase会自动恢复会话
    const unsubscribe = projectAuth.onAuthStateChanged((authUser) => {
      setUser(authUser);
      setLoading(false);
    });

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

  return { user, loading };
};

步骤2：修改私有路由组件 #

使用上面的Hook替代直接访问currentUser，并添加加载状态避免误跳转：

import { Outlet, Navigate, useLocation } from "react-router-dom";
import { useAuth } from "./hooks/useAuth";

const PrivateRoute = () => {
  const location = useLocation();
  const { user, loading } = useAuth();

  // 等待Auth会话初始化完成，显示加载状态
  if (loading) {
    return <div>加载中...</div>; // 可替换为自定义加载UI
  }

  return user ? <Outlet /> : <Navigate to="/login" state={{ from: location }} replace />;
};

export default PrivateRoute;

原理说明 #

Firebase Auth默认会在浏览器中持久化用户会话（存储方式由Firebase自动管理），无需手动存储。onAuthStateChanged会在页面加载时触发异步检查，当Firebase完成会话恢复后，会返回当前用户对象，此时再判断是否允许访问私有路由，就不会出现刷新后跳转登录的问题。

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