Next.js项目中使用NextAuth保护Dashboard路由的最佳方案

结合你使用的Next.js App Router架构，推荐以下几种路由保护方案，按优先级排序：

1. 全局路由拦截：使用Middleware（最推荐） #

这种方式能在请求到达页面之前直接拦截未登录用户，适合保护整个/dashboard目录下的所有路由，无需在每个页面重复编写校验逻辑。

步骤：

• 在user-app根目录创建middleware.ts文件
• 编写如下代码：

import { withAuth } from "next-auth/middleware";

export default withAuth({
  pages: {
    signIn: "/login", // 替换为你的实际登录页路由
  },
});

// 指定需要保护的路由规则，匹配/dashboard下的所有子路由
export const config = {
  matcher: ["/dashboard/:path*"],
};

原理：withAuth会自动校验请求中的Session，未登录用户会被重定向到配置的登录页，登录完成后会自动跳转回原请求的Dashboard页面。

2. 服务器组件层面校验：getServerSession #

如果需要在Dashboard页面渲染前获取用户信息并做个性化处理，适合用服务器组件的方式直接校验Session：

// app/dashboard/dashboard.tsx
import { getServerSession } from "next-auth/next";
import { authOptions } from "../api/auth/[...nextauth]"; // 导入你的NextAuth配置文件
import { redirect } from "next/navigation";

export default async function Dashboard() {
  const session = await getServerSession(authOptions);

  // 未登录则直接重定向到登录页
  if (!session) {
    redirect("/login");
  }

  // 已登录，渲染Dashboard内容
  return (
    <div>
      <h1>欢迎，{session.user?.name}</h1>
      {/* 你的Dashboard页面内容 */}
    </div>
  );
}

优势：服务器端渲染前完成校验，不会向未登录用户暴露页面内容，安全性更高。

3. 客户端组件层面：Protected包裹组件 #

如果你的Dashboard包含客户端交互逻辑，需要在客户端处理登录状态，可以用SessionProvider配合自定义Protected组件：

首先确保根布局已配置SessionProvider（你的provider.tsx可复用）：

// provider.tsx
"use client";
import { SessionProvider } from "next-auth/react";

export function AuthProvider({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

// 根layout.tsx中引入
import { AuthProvider } from "./provider";

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

然后创建Protected组件：

// components/Protected.tsx
"use client";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function Protected({ children }: { children: React.ReactNode }) {
  const { data: session, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/login");
    }
  }, [status, router]);

  // 加载状态显示占位内容
  if (status === "loading") {
    return <div>加载中...</div>;
  }

  // 已登录则渲染内容，否则返回null
  return session ? <>{children}</> : null;
}

最后在Dashboard页面中使用：

// app/dashboard/dashboard.tsx
import Protected from "@/components/Protected";

export default function Dashboard() {
  return (
    <Protected>
      {/* 你的Dashboard客户端内容 */}
    </Protected>
  );
}

最佳实践总结 #

• 保护整个目录优先选Middleware，高效且无需重复代码
• 单个服务器组件页面选getServerSession，安全性更高
• 客户端交互场景选Protected组件方案

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