如何在React应用中实现跨页面保持Firebase登录会话？

核心问题分析 #

你当前的代码在onAuthStateChanged回调中直接强制跳转首页或注册页，完全忽略了用户原本想要访问的页面路径，这就是多页面场景下登录后无法回到目标页的原因。同时，要确保整个应用的登录会话持续保留，需要结合Firebase的会话持久化配置和路由守卫机制来解决。

方案一：配置Firebase会话持久化 #

Firebase Auth默认会使用本地存储持久化会话，但显式配置可确保稳定性，避免页面刷新或浏览器重启后登录状态丢失：

// 在你的firebase初始化文件中添加
import { setPersistence, browserLocalPersistence } from "firebase/auth";
import { auth } from './firebase';

// 设置持久化存储
setPersistence(auth, browserLocalPersistence)
  .then(() => {
    // 后续登录操作会自动使用本地持久化
  })
  .catch((error) => {
    console.error('持久化配置失败:', error);
  });

方案二：实现受保护路由组件 #

创建统一的路由守卫组件，负责校验用户登录状态，未登录时记录目标路径并跳转登录页：

// src/components/ProtectedRoute.js
import { Navigate, useLocation } from 'react-router-dom';
import { auth } from '../firebase';
import { useState, useEffect } from 'react';

const ProtectedRoute = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const location = useLocation();

  useEffect(() => {
    // 监听登录状态变化
    const unsubscribe = auth.onAuthStateChanged((currentUser) => {
      setUser(currentUser);
      setLoading(false);
    });
    // 组件卸载时取消监听
    return unsubscribe;
  }, []);

  // 加载状态显示（可替换为自定义加载组件）
  if (loading) {
    return <div>加载中...</div>;
  }

  // 未登录时，跳转登录页并携带当前路径
  if (!user) {
    return <Navigate to="/auth_login" state={{ from: location }} replace />;
  }

  // 已登录则渲染目标页面
  return children;
};

export default ProtectedRoute;

方案三：修改App.js使用受保护路由 #

移除原代码中强制跳转的逻辑，改用受保护路由包裹需要登录才能访问的页面：

// src/App.js
import { Route, Routes, Navigate } from 'react-router-dom';
import Home from './pages/Home';
import SignUp from './pages/SignUp';
import { useState, useEffect } from 'react';
import { auth } from './firebase';
import LogIn from './pages/LogIn';
import Health from './pages/Health';
import ProtectedRoute from './components/ProtectedRoute';

function App() {
  const [userName, setUserName] = useState("");

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if(user) {
        // 使用用户名或邮箱显示
        setUserName(user.displayName || user.email);
      } else {
        setUserName("");
      }
    });
    return unsubscribe;
  }, [])

  return (
    <Routes>
      {/* 公开访问的路由 */}
      <Route path='/auth_signup' element={<SignUp/>}/>
      <Route path='/auth_login' element={<LogIn/>}/>
      
      {/* 需要登录才能访问的路由，用ProtectedRoute包裹 */}
      <Route path='/' element={
        <ProtectedRoute>
          <Home name={userName}/>
        </ProtectedRoute>
      }/>
      <Route path='/health' element={
        <ProtectedRoute>
          <Health name={userName}/>
        </ProtectedRoute>
      }/>
      
      {/* 匹配所有未定义路由，重定向到首页 */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
}

export default App;

方案四：登录成功后跳转目标页 #

修改登录组件，读取之前保存的目标路径，登录成功后直接跳转过去：

// src/pages/LogIn.js
import { useState } from 'react';
import { auth, signInWithEmailAndPassword } from '../firebase';
import { useLocation, useNavigate } from 'react-router-dom';

const LogIn = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();
  const location = useLocation();
  
  // 获取用户原本要访问的路径，默认跳首页
  const targetPath = location.state?.from?.pathname || '/';

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      // 登录成功后跳转到目标页面
      navigate(targetPath, { replace: true });
    } catch (error) {
      console.error('登录失败:', error.message);
      alert('登录失败：' + error.message);
    }
  };

  return (
    <div>
      <h2>登录</h2>
      <form onSubmit={handleLogin}>
        <input
          type="email"
          placeholder="邮箱"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <input
          type="password"
          placeholder="密码"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <button type="submit">登录</button>
      </form>
    </div>
  );
};

export default LogIn;

最终效果 #

1. 用户访问需要登录的页面时，会自动跳转到登录页，同时记录目标路径
2. 登录成功后，直接跳转到用户原本想要访问的页面
3. 浏览器关闭或页面刷新后，登录状态依然保留，无需重新登录

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