Next.js+next-auth：如何在getServerSideProps认证中间件传递用户信息

你只需要在验证通过后将用户信息附加到GetServerSidePropsContext对象中，同时扩展TypeScript类型定义以识别新增字段，就能让后续回调直接访问用户信息，无需重复执行认证逻辑。

步骤1：扩展上下文类型（TypeScript） #

先为GetServerSidePropsContext添加自定义字段，让TypeScript认可我们要注入的用户信息：

import { GetServerSidePropsContext } from 'next';
import { Session } from 'next-auth';

// 扩展上下文类型，添加user字段
type AuthContext = GetServerSidePropsContext & {
  user: NonNullable<Session['user']>;
};

// 定义带用户信息的回调函数类型
type AuthGetServerSideProps = (ctx: AuthContext) => ReturnType<GetServerSideProps>;

步骤2：修改requireAuth中间件 #

在验证通过后，将用户信息注入上下文对象，再传递给后续回调：

export const requireAuth =
  (role: Role, func: AuthGetServerSideProps) => async (ctx: GetServerSidePropsContext) => {
    const session = await unstable_getServerSession(
      ctx.req,
      ctx.res,
      authOptions
    );

    if (!session || !session.user || session.user.role !== role) {
      return {
        redirect: {
          destination: "/auth/login",
          permanent: false,
        },
      };
    }

    // 将用户信息注入上下文，传给回调函数
    return await func({ ...ctx, user: session.user });
  };

步骤3：在页面中使用 #

现在可以直接在回调的ctx中访问user字段，无需重复调用认证逻辑：

const Page = ({ user }) => {
  return (
    <div>欢迎，{user.name}（{user.role}）</div>
  );
};

export const getServerSideProps = requireAuth('ADMIN', async (ctx) => {
  // 直接从ctx获取用户信息
  const { user } = ctx;

  // 基于用户信息执行后续逻辑，比如获取专属数据
  // const userData = await fetchUserResources(user.id);

  return { 
    props: { 
      user // 传递给页面组件
    } 
  };
});

export default Page;

关键说明 #

• 扩展上下文类型避免了TypeScript类型报错，同时提升了代码可读性
• 中间件仅执行一次认证逻辑，验证通过后直接传递用户信息，消除重复调用unstable_getServerSession的性能损耗
• 自定义的AuthGetServerSideProps类型确保回调函数能正确接收带用户信息的上下文

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