Next.js 13(App Router)与Auth0全局路由鉴权最佳实践问询

为什么根布局/页面用useUser无效？ #

• Next.js 13 App Router的根布局默认是服务器组件，而useUser是客户端专属钩子，直接放在根布局里会导致鉴权逻辑不执行或失效。
• 就算把根布局改成客户端组件，也只能在客户端渲染阶段做鉴权，服务器端仍会直接返回页面内容，未登录用户能看到页面源码，存在安全漏洞。

推荐方案：用Middleware全局拦截请求 #

这是覆盖所有路由（不管子组件是SSR还是CSR）最可靠的方式，能在请求到达页面之前完成鉴权拦截：

1. 创建Middleware文件 #

在项目根目录（或与app目录同级）新建middleware.ts：

import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export default withMiddlewareAuthRequired({
  // 未登录时跳转的登录路径
  loginPath: '/api/auth/login',
  // 可选：设置无需鉴权的公共路由
  publicRoutes: ['/', '/help'],
});

// 指定Middleware生效的路由范围（排除静态资源和API路由）
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

2. 确认Auth0环境变量配置 #

确保.env.local里的参数正确：

AUTH0_SECRET=your_auth0_secret
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://your-auth0-domain.auth0.com
AUTH0_CLIENT_ID=your_client_id
AUTH0_CLIENT_SECRET=your_client_secret

3. 根布局中保留用户状态上下文 #

将根布局改为客户端组件，用UserProvider包裹子组件，方便客户端组件获取用户信息：

// app/layout.tsx
'use client';

import { UserProvider } from '@auth0/nextjs-auth0/client';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <UserProvider>{children}</UserProvider>
      </body>
    </html>
  );
}

混合渲染场景补充说明 #

• 服务器组件：直接用getServerSession获取用户信息，无需客户端钩子（Middleware已拦截未登录请求，这里做双重保险）：

// app/dashboard/page.tsx
import { getServerSession } from '@auth0/nextjs-auth0';
import { redirect } from 'next/navigation';

export default async function DashboardPage() {
  const session = await getServerSession();
  if (!session) {
    redirect('/api/auth/login');
  }
  return <div>欢迎 {session.user.name}！</div>;
}

• 客户端组件：正常用useUser展示用户信息或登出按钮即可，无需重复做鉴权判断（Middleware已拦截未登录请求）。

为什么不推荐根布局全局判断？ #

• 服务器组件无法使用客户端钩子，客户端组件鉴权仅在前端执行，存在安全隐患。
• 子路由若为服务器组件，根布局的客户端鉴权逻辑无法影响服务器端渲染，未登录用户仍能获取页面内容。

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