Next.js中如何统一认证所有嵌套路由？

针对你需要给所有/admin前缀路由统一做认证的需求，推荐以下几种无需逐个页面配置的方案：

一、Next.js Middleware（优先推荐，Next.js 12+） #

Middleware是Next.js官方推出的请求拦截机制，能在请求到达页面组件前统一处理路由规则，完美适配批量认证场景。

1. 在项目根目录创建 middleware.ts（或.js）文件
2. 编写路由匹配与认证逻辑：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 匹配所有/admin开头的嵌套路由
  const isAdminRoute = request.nextUrl.pathname.startsWith('/admin');
  // 替换为你的实际认证逻辑，比如校验cookie里的token、session状态
  const isAuthenticated = request.cookies.get('auth_token') ? true : false;

  // 未认证访问admin路由时，重定向到登录页
  if (isAdminRoute && !isAuthenticated) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 认证通过或非admin路由，正常放行
  return NextResponse.next();
}

// 配置Middleware生效的路由规则
export const config = {
  matcher: '/admin/:path*', // 匹配所有/admin下的子路由，包括/admin本身
};

• matcher 中的/admin/:path*会自动匹配所有/admin前缀的路由，无需逐个添加
• 认证逻辑可根据实际业务调整，比如校验JWT签名、查询用户会话状态
• 这种方式是在服务端/边缘节点处理，不会出现客户端页面闪烁，安全性更高

二、自定义App组件（Pages Router兼容方案） #

如果你的项目使用的是Next.js 13之前的Pages Router，也可以在_app.tsx中统一处理客户端路由拦截：

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    const checkAuth = () => {
      const isAdminRoute = router.pathname.startsWith('/admin');
      // 客户端侧的认证判断，比如从localStorage取token
      const isAuthenticated = !!localStorage.getItem('auth_token');

      if (isAdminRoute && !isAuthenticated) {
        router.push('/login');
      }
    };

    // 路由切换完成后检查认证状态
    router.events.on('routeChangeComplete', checkAuth);
    // 页面初始加载时执行检查
    checkAuth();

    // 组件卸载时移除事件监听
    return () => router.events.off('routeChangeComplete', checkAuth);
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;

注意：这种方式是客户端侧拦截，可能会出现页面短暂闪烁的情况，适合对拦截时效性要求不高的场景。如果需要严格的服务端拦截，建议结合Middleware使用。

三、额外提示 #

• 若使用Next.js 13+的App Router，Middleware的配置方式完全一致，无需修改
• 认证逻辑要保证严谨性，比如不要仅判断token是否存在，还要校验token的有效性（如过期时间、签名）

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