Next.js App Router认证处理：最佳方案与逻辑位置咨询

在使用Next.js App Router时，处理认证的最佳方式是什么？假设我持有存储JWT Token的Cookie，当未登录用户尝试访问需授权的私有页面时，希望将其重定向至首页。请问该逻辑应放置在Middleware中，还是存在更合适的实现位置？

当前Middleware实现代码：

export default function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  const jwt = request.cookies.get("Authorization");

  if (!jwt && pathname.includes('/some_private_url')) {
      // not logged in -> goto home
      request.nextUrl.pathname = `/`;
      return Response.redirect(request.nextUrl);
  }
}

核心结论：Middleware 是处理这类全局认证拦截的最优位置 #

Middleware 运行在请求到达页面组件之前，能全局统一处理所有路由的认证校验，避免在每个私有页面重复编写重定向逻辑，同时能有效防止未授权用户通过直接访问路由加载页面内容（避免客户端渲染的闪烁问题）。

不过你的当前实现还有可以优化的地方：

1. 用 matcher 配置精确匹配私有路由，提升性能

没必要在Middleware函数里手动判断路径，Next.js允许在middleware.ts同级配置matcher，只让Middleware作用于指定的私有路由，减少不必要的逻辑执行：

export const config = {
  matcher: [
    '/some_private_url/:path*', // 匹配/some_private_url下的所有子路径
    '/another_private_page' // 精确匹配单个私有页面
  ]
};

export default function middleware(request: NextRequest) {
  const jwt = request.cookies.get("Authorization");

  // 因为matcher已经过滤了私有路由，这里直接判断Token即可
  if (!jwt) {
    const homeUrl = new URL('/', request.url);
    return Response.redirect(homeUrl);
  }

  // 额外补充：不要只检查Token是否存在，还要验证Token的有效性
  try {
    // 这里用你项目里的JWT验证逻辑，比如jsonwebtoken库
    // verify(jwt.value, process.env.JWT_SECRET);
  } catch (err) {
    // Token无效/过期，同样重定向到首页
    const homeUrl = new URL('/', request.url);
    return Response.redirect(homeUrl);
  }
}

2. 必须验证JWT的有效性，而不只是检查存在与否

你的当前代码只判断了Cookie是否存在，但Cookie里的Token可能已经过期、被篡改，所以一定要添加Token的校验逻辑，避免无效Token绕过认证。

3. 配合Server Components获取用户信息（可选）

如果页面需要展示用户相关数据（比如用户名），可以在Server Component里通过cookies()函数获取Token，解析后获取用户信息，无需在客户端暴露敏感数据：

// app/some_private_url/page.tsx
import { cookies } from 'next/headers';
import jwt from 'jsonwebtoken';

export default async function PrivatePage() {
  const authCookie = cookies().get('Authorization');
  if (!authCookie) {
    // 兜底处理（理论上Middleware已经拦截，这里做双重保险）
    redirect('/');
  }

  try {
    const user = jwt.verify(authCookie.value, process.env.JWT_SECRET);
    return <div>欢迎回来，{user.username}</div>;
  } catch (err) {
    redirect('/');
  }
}

其他方案的局限性 #

• 客户端组件内判断：比如用useRouter在客户端做重定向，但会导致页面先加载再跳转，出现视觉闪烁，而且无法阻止用户查看页面源码，安全性不如Middleware。
• 单个页面的Server Component校验：只能处理单个页面，无法全局统一管理，代码冗余度高。

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