使用Next.js与next-auth时页面重定向为何无法即时触发？

问题原因 #

• useSession是客户端钩子，组件完成首次渲染后才会执行认证检查逻辑。Next.js客户端组件会先在服务端生成无状态的初始HTML（也就是你写的Member页面内容），等客户端JS加载完成后才会触发useSession的判断，这时候才执行redirect，所以会出现页面先显示再跳转的情况。
• required: true和onUnauthenticated都是客户端层面的逻辑，没办法拦截服务端的初始渲染输出，自然不能在页面首次加载时就触发重定向。

解决方案 #

1. 用中间件做前置拦截（推荐） #

中间件可以在请求到达页面之前就完成认证检查，直接重定向，完全避免客户端组件的初始渲染。

创建middleware.js文件：

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

export default withAuth({
  pages: {
    signIn: "/api/auth/signin",
  },
})

export const config = {
  matcher: ["/clientmember"], // 指定需要保护的路由，支持正则
}

这样用户访问/clientmember时，中间件会先校验会话，未登录直接跳转到登录页，根本不会加载Member组件的内容。

2. 客户端组件添加加载态拦截 #

如果必须用客户端组件，可以在会话状态未确定前，不渲染页面内容，避免用户看到未授权的信息：

修改你的Member组件：

"use client";

import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";

const Member = () => {
  const { data: session, status } = useSession({
    required: true,
    onUnauthenticated() {
      redirect("/api/auth/signin?callbackUrl=/ClientMember");
    }
  });

  // 会话还在加载时，显示加载状态或空白
  if (status === "loading") {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>Member Client Session</h1>
      <p>{session?.user?.email}</p>
      <p>{session?.user?.role}</p>
    </div>
  );
};

export default Member;

这样用户只会在会话加载完成前看到“加载中”，不会提前看到Member页面内容，等认证逻辑跑完后要么跳转要么显示正常内容。

3. 改用服务器组件检查会话 #

把Member改成服务器组件，在服务端直接校验会话，未登录直接重定向：

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

const Member = async () => {
  const session = await getServerSession(authOptions);

  if (!session) {
    redirect("/api/auth/signin?callbackUrl=/ClientMember");
  }

  return (
    <div>
      <h1>Member Client Session</h1>
      <p>{session.user?.email}</p>
      <p>{session.user?.role}</p>
    </div>
  );
};

export default Member;

服务器组件在服务端渲染阶段就会完成会话检查，未登录直接返回重定向响应，不会向客户端发送任何页面内容，彻底解决先加载再跳转的问题。

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