NextJS如何在/admin子路由触发时执行客户端Firebase身份验证代码

针对你的需求，这里有几个实用的方案，都是在客户端执行认证逻辑，能确保auth.currentUser填充完成后再做检查：

方案1：自定义高阶组件（HOC）包裹/admin页面（适用于Pages Router） #

写一个复用的认证校验组件，用它包裹所有/admin下的页面，这样每个/admin路由访问时都会自动执行认证检查。

步骤1：创建RequireAuth高阶组件 #

// components/RequireAuth.js
import { useEffect, useState } from 'react';
import { auth } from '../firebase/config';
import { useRouter } from 'next/router';

export default function RequireAuth(Component) {
  return function AuthenticatedComponent(props) {
    const router = useRouter();
    const [isLoading, setIsLoading] = useState(true);
    const [user, setUser] = useState(null);

    useEffect(() => {
      // 监听Firebase认证状态变化，确保currentUser加载完成
      const unsubscribe = auth.onAuthStateChanged((currentUser) => {
        if (!currentUser) {
          // 未认证则跳转到登录页
          router.push('/login');
        } else {
          setUser(currentUser);
        }
        setIsLoading(false);
      });

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

    // 加载状态下显示占位内容
    if (isLoading) {
      return <div>加载中...</div>;
    }

    // 已认证则渲染目标页面，同时传递用户信息
    return user ? <Component {...props} user={user} /> : null;
  };
}

步骤2：在/admin页面中使用HOC #

// pages/admin/dashboard.js
import RequireAuth from '../../components/RequireAuth';

function Dashboard({ user }) {
  return <div>管理员仪表盘，欢迎{user.email}</div>;
}

// 用RequireAuth包裹页面组件
export default RequireAuth(Dashboard);

所有/admin下的页面都用这个方式包裹，就能自动触发认证检查。

方案2：使用App Router的Layout组件（适用于Next.js 13+） #

如果你用的是Next.js 13及以上的App Router，可以在/admin目录下创建一个全局布局组件，所有/admin子路由都会继承这个布局的认证逻辑，不用逐个页面处理。

// app/admin/layout.js
'use client'; // 标记为客户端组件，确保能访问Firebase客户端API
import { useEffect, useState } from 'react';
import { auth } from '../../firebase/config';
import { useRouter } from 'next/navigation';

export default function AdminLayout({ children }) {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((currentUser) => {
      if (!currentUser) {
        router.push('/login');
      }
      setIsLoading(false);
    });

    return () => unsubscribe();
  }, [router]);

  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 已认证则渲染子页面内容
  return <div>{children}</div>;
}

这样所有/admin/*的路由都会先经过这个布局的认证检查，逻辑更集中。

为什么不推荐用Middleware？ #

你说的没错，Next.js 12的Middleware不适合这个场景：Middleware运行在服务器端，而Firebase的用户会话存储在客户端的cookie或localStorage中，服务器端无法直接读取auth.currentUser，也就没法在Middleware里完成有效的客户端认证校验。

方案3：单个页面直接处理（适合/admin页面极少的情况） #

如果你的/admin目录只有1-2个页面，也可以直接在页面组件里写认证逻辑，不用封装HOC：

// pages/admin/settings.js
import { useEffect, useState } from 'react';
import { auth } from '../../firebase/config';
import { useRouter } from 'next/router';

export default function Settings() {
  const router = useRouter();
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((currentUser) => {
      if (!currentUser) {
        router.push('/login');
      } else {
        setUser(currentUser);
      }
      setIsLoading(false);
    });

    return () => unsubscribe();
  }, [router]);

  if (isLoading) return <div>加载中...</div>;

  return <div>设置页面，当前用户：{user.email}</div>;
}

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