如何阻止Next-auth切换标签页时更新会话过期时间？

核心解决方案：禁用窗口聚焦时的会话重取 #

Next-auth的SessionProvider默认开启了refetchOnWindowFocus选项（值为true），这会导致浏览器窗口从后台切换回前台时自动发起会话刷新请求，进而更新expires字段。只需将该选项设置为false即可阻止这一行为：

页面路由（Pages Router）示例 #

// pages/_app.js
import { SessionProvider } from "next-auth/react"

export default function App({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider 
      session={session}
      refetchOnWindowFocus={false} // 关键配置：禁用窗口聚焦触发的会话重取
    >
      <Component {...pageProps} />
    </SessionProvider>
  )
}

App路由（App Router）示例 #

// app/layout.js
import { SessionProvider } from "next-auth/react"

export default function RootLayout({ children, session }) {
  return (
    <html lang="zh-CN">
      <body>
        <SessionProvider 
          session={session}
          refetchOnWindowFocus={false}
        >
          {children}
        </SessionProvider>
      </body>
    </html>
  )
}

现象原因说明 #

Next-auth默认监听浏览器的visibilitychange事件，当窗口状态从hidden切换为visible时，会自动触发会话刷新流程。此时后端会返回包含新expires时间的会话数据（即使accessToken未过期或未更换），最终导致前端会话对象中的expires字段被更新。

精细控制方案（可选） #

如果需要保留手动触发会话刷新的能力，但仅阻止窗口聚焦的自动刷新，上述配置完全适用。若需进一步固定会话过期时间，可在jwt回调中自定义expires字段的生成逻辑，确保其始终保持初始值：

// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth"
import Providers from "next-auth/providers" // 根据你的认证提供者调整

export default NextAuth({
  providers: [
    // 你的认证提供者配置
  ],
  callbacks: {
    async jwt({ token, user, account }) {
      // 仅在首次登录时设置过期时间
      if (account && user) {
        token.expires = account.expires_at 
          ? new Date(account.expires_at * 1000).toISOString() 
          : token.expires
      }
      // 后续刷新会话时不更新过期时间
      return token
    },
    async session({ session, token }) {
      // 将固定的过期时间同步到session对象
      session.expires = token.expires
      return session
    }
  }
})

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