使用NextAuth.js阻止Next.js已认证用户访问登录注册页

方案1：使用Next.js Middleware（首推） #

Middleware会在请求到达页面之前运行，直接在服务器端完成会话判断和重定向，完全避免页面渲染闪烁。

操作步骤：

• 在项目根目录创建 middleware.ts（或.js）文件
• 编写以下逻辑，拦截登录/注册页的请求：

import { getToken } from "next-auth/jwt";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export async function middleware(request: NextRequest) {
  const path = request.nextUrl.pathname;
  // 定义需要拦截的页面路径
  const isAuthPage = path === "/login" || path === "/register";
  
  // 获取JWT令牌判断用户是否已认证
  const token = await getToken({ req: request, secret: process.env.NEXTAUTH_SECRET });

  // 已认证用户访问登录/注册页时，直接重定向到仪表盘
  if (isAuthPage && token) {
    return NextResponse.redirect(new URL("/dashboard", request.url));
  }

  // 其他情况正常放行
  return NextResponse.next();
}

// 指定中间件生效的路径
export const config = {
  matcher: ["/login", "/register"],
};

这个方法从请求源头拦截，浏览器不会加载登录页的任何内容，彻底消除闪烁。

方案2：Pages Router下用getServerSideProps #

如果你用的是Pages Router，可以在登录/注册页面的getServerSideProps里提前判断会话，服务器端直接重定向：

import { getSession } from "next-auth/react";
import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getSession(context);

  if (session) {
    return {
      redirect: {
        destination: "/dashboard",
        permanent: false,
      },
    };
  }

  return { props: {} };
};

export default function LoginPage() {
  return (
    // 登录页面内容
  );
}

这种方式在服务器端就完成了重定向，客户端不会收到登录页的HTML，自然不会有闪烁。

方案3：App Router下用Server Component重定向 #

如果是App Router，直接在登录/注册页面的Server Component里判断会话并触发重定向：

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { redirect } from "next/navigation";

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

  if (session) {
    redirect("/dashboard");
  }

  return (
    // 登录页面内容
  );
}

Server Component在服务器端执行，一旦检测到会话存在会立即跳转，客户端不会渲染登录页内容。

为什么之前的客户端Wrapper会闪烁？ #

你之前用的自定义AuthRedirectWrapper是客户端组件，getSession是在浏览器端异步获取状态，这时候页面已经开始渲染了，直到会话结果返回才会触发重定向，所以会出现短暂的闪烁。而上面的方案都是在服务器端或请求拦截阶段完成判断，完全跳过了登录页的渲染流程。

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