Next-auth刷新令牌轮换时多次重渲染问题求助

你遇到的重复渲染、重复刷新请求问题，核心原因是会话状态的多源触发和刷新逻辑未做互斥控制，并非不能同时使用useSession和getSession，而是需要合理管理它们的调用时机和范围。以下是具体解决方案：

一、统一会话状态来源，避免重复触发检查 #

不要在多个组件、拦截器里分散调用useSession或getSession，而是将会话状态集中管理，通过上下文(Context)共享给整个应用：

1. 创建全局会话上下文

// context/SessionContext.tsx
import { createContext, useContext, ReactNode } from 'react';
import { useSession, Session } from 'next-auth/react';

type SessionContextType = {
  session: Session | null;
  loading: boolean;
};

const SessionContext = createContext<SessionContextType | undefined>(undefined);

export const SessionProvider = ({ children }: { children: ReactNode }) => {
  const { data: session, loading } = useSession();
  return (
    <SessionContext.Provider value={{ session, loading }}>
      {children}
    </SessionContext.Provider>
  );
};

export const useAppSession = () => {
  const context = useContext(SessionContext);
  if (!context) {
    throw new Error('useAppSession必须在SessionProvider内部使用');
  }
  return context;
};

2. 在_app.tsx中包裹上下文

import { SessionProvider as NextAuthSessionProvider } from 'next-auth/react';
import { SessionProvider } from '../context/SessionContext';

function MyApp({ Component, pageProps }) {
  return (
    <NextAuthSessionProvider session={pageProps.session}>
      <SessionProvider>
        <Component {...pageProps} />
      </SessionProvider>
    </NextAuthSessionProvider>
  );
}

export default MyApp;

3. 所有组件统一使用useAppSession()获取会话状态，替代直接调用useSession或getSession，确保会话状态唯一来源，减少重复渲染和检查请求。

二、给令牌刷新逻辑加互斥锁，避免重复请求 #

在刷新令牌的函数中添加全局锁，确保同一时间只有一个刷新请求在执行：

// utils/refreshToken.ts
let isRefreshing = false;
let refreshPromise: Promise<string | null> | null = null;

export async function refreshAccessToken() {
  // 如果正在刷新，直接返回当前的刷新Promise，复用结果
  if (isRefreshing) return refreshPromise;

  isRefreshing = true;
  try {
    // 你的刷新令牌API调用逻辑
    const response = await fetch('/api/auth/refresh-token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ refreshToken: localStorage.getItem('refreshToken') }),
    });

    const data = await response.json();
    if (!response.ok) throw new Error(data.error);

    // 更新本地存储的令牌
    localStorage.setItem('accessToken', data.accessToken);
    localStorage.setItem('refreshToken', data.refreshToken);

    return data.accessToken;
  } catch (error) {
    console.error('令牌刷新失败:', error);
    // 刷新失败可触发登出逻辑
    return null;
  } finally {
    isRefreshing = false;
    refreshPromise = null;
  }
}

不管多少地方调用refreshAccessToken，同一时间只会发起一个请求，后续调用会等待第一个请求完成并复用结果，彻底避免同一refresh token被多次使用导致失效。

三、利用Next-auth的JWT回调自动管理令牌刷新 #

如果使用CredentialsProvider，推荐配置session: { strategy: "jwt" }，让Next-auth在回调中自动处理令牌刷新，减少外部逻辑的干扰：

// pages/api/auth/[...nextauth].ts
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        // 你的登录验证逻辑，返回包含accessToken、refreshToken、expiresIn的用户数据
        const res = await fetch('/api/login', {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: { 'Content-Type': 'application/json' },
        });
        const user = await res.json();
        if (res.ok && user) return user;
        return null;
      },
    }),
  ],
  session: { strategy: 'jwt' },
  callbacks: {
    async jwt({ token, user }) {
      // 登录时初始化令牌数据
      if (user) {
        token.accessToken = user.accessToken;
        token.refreshToken = user.refreshToken;
        token.expiresAt = Date.now() + user.expiresIn * 1000;
      }

      // 令牌未过期，直接返回
      if (Date.now() < token.expiresAt - 60000) return token;

      // 令牌即将过期，自动刷新
      try {
        const res = await fetch('/api/auth/refresh-token', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ refreshToken: token.refreshToken }),
        });
        const newTokens = await res.json();
        if (!res.ok) throw new Error(newTokens.error);

        return {
          ...token,
          accessToken: newTokens.accessToken,
          refreshToken: newTokens.refreshToken,
          expiresAt: Date.now() + newTokens.expiresIn * 1000,
        };
      } catch (error) {
        // 刷新失败，标记错误，触发会话过期
        return { ...token, error: 'RefreshTokenError' };
      }
    },
    async session({ session, token }) {
      // 将令牌数据传递给前端会话
      session.accessToken = token.accessToken;
      session.error = token.error;
      return session;
    },
  },
});

这种方式下，Next-auth会自动在令牌即将过期时触发刷新，且只会发起一次请求，无需手动在多个地方调用刷新逻辑，从根源减少重复请求问题。

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