React中用Firebase Authentication保护页面的方案是否符合最佳实践？

我正在使用Firebase Authentication保护页面，当用户已登录时展示页面内容，未登录则3秒后将用户跳转至登录页面。目前我有多个页面需要进行未授权访问防护，想咨询当前的实现方式是否可行？是否需要改用其他最佳实践方案？

当前实现代码 #

JavaScript逻辑 #

import { useState } from "react";
import {auth} from '../dashboard/config';
import {onAuthStateChanged } from "firebase/auth";
import {useNavigate } from 'react-router-dom';


  const [isProtectPage, setIsProtectPage] = useState(false);
  const navigate = useNavigate();

  onAuthStateChanged(auth, (user) => {
    
    if (user) {
      //if user is logged in show component.
      setIsProtectPage(true);

    } 
    
    else {
      //if user is not logged in hide component.
      setIsProtectPage(false);

    //And redirect user to login page.
      setTimeout(() => {
        navigate("/login")
        }, 3000);      
    }

  });

JSX部分 #

{isProtectPage ? ( <DashboardPage /> ) 
                 : 
                 ( <h2> You are not authorized  to access this page. </h2> )
                 
}

当前实现的可行性分析 #

你的实现基本能达到需求，但存在几个明显的问题：

• 重复注册监听器：组件每次渲染都会调用onAuthStateChanged，导致重复注册监听，可能触发多次状态更新和跳转逻辑。
• 页面闪烁问题：isProtectPage初始值为false，会先显示未授权提示，直到Auth状态回调触发后才更新，用户会看到不必要的内容闪烁。
• 代码冗余：每个需要保护的页面都要复制这段逻辑，后期维护成本高。
• 跳转逻辑不可靠：setTimeout的延迟可能在Auth状态未完全同步时执行，比如用户刚登录但状态还没更新，可能出现误跳转。

最佳实践方案 #

推荐封装一个路由守卫组件，统一处理权限校验，一次性解决上述问题，同时实现代码复用：

1. 封装AuthGuard组件 #

import { useEffect, useState } from "react";
import { auth } from '../dashboard/config';
import { onAuthStateChanged } from "firebase/auth";
import { useNavigate } from 'react-router-dom';

const AuthGuard = ({ children }) => {
  const [isLoading, setIsLoading] = useState(true);
  const navigate = useNavigate();

  useEffect(() => {
    // 注册Auth状态监听，并保存取消订阅的方法
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (!user) {
        // 未登录直接跳转（若需要提示可保留延迟逻辑）
        navigate("/login", { replace: true });
      }
      setIsLoading(false);
    });

    // 组件卸载时取消监听，避免内存泄漏
    return unsubscribe;
  }, [navigate]);

  // 加载状态时显示加载提示，避免页面闪烁
  if (isLoading) {
    return <h2>加载中...</h2>;
  }

  // 已登录则渲染受保护的页面内容
  return children;
};

export default AuthGuard;

2. 在路由配置中使用守卫 #

在react-router-dom的路由配置里，用AuthGuard包裹所有需要保护的页面：

import { Routes, Route } from 'react-router-dom';
import AuthGuard from './AuthGuard';
import DashboardPage from './DashboardPage';
import LoginPage from './LoginPage';
import ProfilePage from './ProfilePage';

function AppRoutes() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      {/* 受保护的仪表盘页面 */}
      <Route 
        path="/dashboard" 
        element={
          <AuthGuard>
            <DashboardPage />
          </AuthGuard>
        } 
      />
      {/* 其他受保护页面同理 */}
      <Route 
        path="/profile" 
        element={
          <AuthGuard>
            <ProfilePage />
          </AuthGuard>
        } 
      />
    </Routes>
  );
}

export default AppRoutes;

3. 可选：保留3秒提示后跳转 #

如果仍需要显示未授权提示再跳转，修改AuthGuard中的未登录逻辑即可：

if (!user) {
  setTimeout(() => {
    navigate("/login", { replace: true });
  }, 3000);
  return <h2>你无权访问此页面，即将跳转至登录页...</h2>;
}

方案优势 #

• 代码复用：所有受保护页面只需用AuthGuard包裹，无需重复编写权限校验逻辑。
• 避免内存泄漏：通过useEffect的清理函数取消Auth监听，防止重复触发回调。
• 优化用户体验：加载状态避免页面闪烁，路由层面的守卫更符合单页应用的权限控制逻辑。
• 逻辑更可靠：直接在Auth状态回调中处理跳转，避免状态不同步导致的错误。

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