Next.js结合Firebase实现受保护路由重定向延迟问题如何解决？

问题根源 #

你当前的实现出现闪屏是两个核心原因：

1. useEffect 执行时机晚于组件首次渲染，页面内容已经渲染完成后才会触发重定向逻辑
2. 没有处理Firebase登录态的加载中状态：Firebase初始化校验登录态的过程中，currentUser 为 undefined，此时你直接渲染了受保护的页面内容，等校验完成确认未登录才跳转，就出现了短暂的内容暴露。

方案1：客户端统一路由保护（零额外依赖，最简实现） #

步骤1：完善AuthContext，增加加载状态

首先调整你的AuthContext实现，增加loading字段标记Firebase登录态的校验进度：

// ../components/authentication/auth.js
import { createContext, useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [authState, setAuthState] = useState({
    currentUser: null,
    loading: true // 初始化时为加载中状态
  });
  const auth = getAuth();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setAuthState({
        currentUser: user,
        loading: false // 校验完成，关闭加载状态
      });
    });
    return unsubscribe;
  }, [auth]);

  return (
    <AuthContext.Provider value={authState}>
      {children}
    </AuthContext.Provider>
  );
}

步骤2：封装路由保护高阶组件（HOC）

写一个通用的高阶组件，统一处理所有受保护页面的登录校验逻辑，不用每个页面重复写代码：

// ../components/authentication/withAuth.js
import { useContext, useEffect } from 'react';
import { useRouter } from 'next/router';
import { AuthContext } from './auth';

export default function withAuth(Component) {
  return function ProtectedRoute(props) {
    const { currentUser, loading } = useContext(AuthContext);
    const router = useRouter();

    useEffect(() => {
      // 加载完成后判断登录态，未登录则跳转
      if (!loading && !currentUser) {
        router.push('/login');
      }
    }, [currentUser, loading, router]);

    // 登录态校验中时，渲染加载占位，不暴露页面内容
    if (loading) return <div>加载中...</div>;
    // 未登录状态下也不渲染页面内容
    if (!currentUser) return null;

    // 登录成功，渲染页面
    return <Component {...props} />;
  }
}

步骤3：页面使用HOC包裹即可

你的users页面可以简化为：

import Users from "../components/users/Users";
import Layout from "../components/general/Layout";
import withAuth from "../components/authentication/withAuth";

function users() {
  return (
    <Layout>
      <Users />
    </Layout>
  );
}

// 用高阶组件包裹后自动获得路由保护能力
export default withAuth(users);

如果你的项目所有路由都是受保护路由，也可以直接把上述校验逻辑写在_app.js中，不用每个页面单独包裹HOC，更省事。

方案2：服务端校验（完全消除闪屏） #

如果要彻底避免客户端跳转的延迟问题，可以配合服务端能力实现：

1. 用户登录成功后，将Firebase返回的ID Token写入HttpOnly Cookie
2. 如果你用Pages Router，可以在每个受保护页面的getServerSideProps中校验Cookie的合法性，校验不通过直接返回302重定向到登录页
3. 如果你用Next.js 13+的App Router，可以直接用中间件（Middleware）统一处理所有路由的登录校验，不需要每个页面单独配置

这种方案下服务端会直接处理重定向，客户端不会收到任何受保护页面的内容，完全不会出现闪屏问题。

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