如何在Next.js中基于iron-session实现next-auth式withAuth鉴权模式？

完全可以基于iron-session在Next.js中实现和next-auth完全一致的页面组件鉴权模式，核心逻辑和你提到的next-auth方案完全对齐，只需要将next-auth的会话管理API替换为iron-session的对应实现即可，具体实现步骤如下：

1. 封装全局会话上下文（替代next-auth的SessionProvider与useSession） #

首先封装React上下文同步服务端生成的session到客户端全局，方便组件统一调用：

// contexts/session-context.tsx
import { createContext, useContext, ReactNode } from 'react';

// 按你的业务需求自定义会话字段
type Session = {
  user?: {
    id: string;
    username: string;
    avatar?: string;
  }
}

const SessionContext = createContext<{ session: Session | null }>({
  session: null
});

export function SessionProvider({ 
  children, 
  session 
}: { 
  children: ReactNode, 
  session: Session | null 
}) {
  return (
    <SessionContext.Provider value={{ session }}>
      {children}
    </SessionContext.Provider>
  )
}

export function useSession() {
  return useContext(SessionContext);
}

2. 实现_app.tsx全局鉴权逻辑 #

和next-auth的逻辑完全一致，判断页面组件的.auth属性，对需要鉴权的页面嵌套鉴权组件：

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { SessionProvider, useSession } from '../contexts/session-context';

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps<{ session: any }>) {
  return (
    <SessionProvider session={session}>
      {Component.auth ? (
        <Auth>
          <Component {...pageProps} />
        </Auth>
      ) : (
        <Component {...pageProps} />
      )}
    </SessionProvider>
  )
}

// 鉴权组件逻辑与next-auth对齐
function Auth({ children }: { children: React.ReactNode }) {
  const { session } = useSession();
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(true);

  const isLoggedIn = !!session?.user;

  useEffect(() => {
    // 会话还在加载中时不处理
    if (session === undefined) return;
    setIsLoading(false);
    // 未登录时跳转到登录页
    if (!isLoggedIn) router.push('/login');
  }, [isLoggedIn, session, router]);

  if (isLoading || !isLoggedIn) {
    return <div>Loading...</div>;
  }

  return children;
}

3. 封装服务端会话获取工具 #

封装公共的SSR高阶函数，统一从服务端获取iron-session并传递到客户端：

// utils/with-session.ts
import { GetServerSidePropsContext } from 'next';
import { withIronSessionSsr } from 'iron-session/next';

// iron-session基础配置，注意密码要存到环境变量，长度至少32位
export const sessionOptions = {
  cookieName: 'your_app_session',
  password: process.env.IRON_SESSION_PASSWORD as string,
  cookieOptions: {
    secure: process.env.NODE_ENV === 'production',
    maxAge: 7 * 24 * 60 * 60 // 会话有效期7天
  },
};

export const withSessionSsr = (customHandler?: any) => withIronSessionSsr(
  async (context: GetServerSidePropsContext) => {
    const session = context.req.session;
    const sessionData = session.user ? { user: session.user } : null;

    // 支持传入页面自定义的getServerSideProps逻辑
    if (customHandler) {
      const handlerRes = await customHandler(context);
      return {
        ...handlerRes,
        props: {
          ...handlerRes.props,
          session: sessionData,
        }
      }
    }

    return {
      props: {
        session: sessionData,
      }
    }
  },
  sessionOptions
);

4. 页面使用方式 #

需要鉴权的页面只需要添加.auth = true标识，并用withSessionSsr包裹getServerSideProps即可，和next-auth的使用体验完全一致：

// pages/profile.tsx 示例：需要鉴权的用户中心页
import { withSessionSsr } from '../utils/with-session';

export default function Profile() {
  return <div>用户中心，仅登录用户可访问</div>
}

// 标记该页面需要鉴权
Profile.auth = true;

export const getServerSideProps = withSessionSsr();

不需要鉴权的页面无需添加.auth属性，也可以按需选择是否使用withSessionSsr获取会话信息。

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