Firebase Auth页面刷新时/admin路由被重定向至登录页问题

页面刷新时，Firebase Auth需要异步恢复用户登录会话，此时auth.currentUser初始值是null。你的PrivateRoute组件直接用这个初始值做判断，就会触发重定向到登录页。而根路由的用户信息是通过UserProvider里的onAuthStateChanged监听状态变化，等Firebase完成会话恢复后才更新显示，所以刷新根路由能正常看到用户信息。

修改PrivateRoute组件，添加加载状态，通过onAuthStateChanged监听用户认证状态，直到拿到明确的用户状态后再做路由判断：

import React, { useState, useEffect } from "react";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import Spinner from "../sharedUi/Spinner"; // 复用你已有的Spinner组件

const PrivateRoute = () => {
  const location = useLocation();
  const auth = getAuth();
  const [isLoading, setIsLoading] = useState(true);
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setIsLoading(false);
    });

    return unsubscribe;
  }, [auth]);

  // 认证状态未确定时显示加载提示
  if (isLoading) {
    return <Spinner />;
  }

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

export default PrivateRoute;

• 借助onAuthStateChanged的异步监听，等待Firebase完成用户会话恢复，确保拿到真实的登录状态
• 添加isLoading状态，避免在认证状态未明确时就执行重定向逻辑，同时给用户提供加载反馈

修改后刷新/admin页面，会先显示加载动画，等Firebase确认用户已登录后，就会正常渲染Admin页面，不会再被错误重定向。

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