如何在每次刷新时更新NextAuth会话？解决用户名修改不生效问题

客户端：页面刷新时主动拉取最新会话 #

用NextAuth的useSession钩子结合useEffect，在页面加载或刷新时强制更新会话，覆盖本地缓存的旧数据：

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

function UserProfile() {
  const { data: session, update } = useSession();

  useEffect(() => {
    // 页面刷新时触发会话更新
    const refreshLatestSession = async () => {
      await update();
    };
    refreshLatestSession();
  }, [update]);

  return <div>当前用户名：{session?.user?.name}</div>;
}

update()方法会让NextAuth重新向认证端点发起请求，拉取最新的用户信息同步到会话中。

服务器端：自定义会话回调确保数据实时性 #

在[...nextauth].js配置文件里，通过jwt和session回调，每次生成会话时都从数据库拉取最新用户数据，避免依赖登录时的缓存：

import NextAuth from "next-auth";
import { getUserById } from "../utils/db-utils"; // 替换成你的数据库查询方法

export default NextAuth({
  providers: [
    // 这里放你的认证提供商配置（比如Google、Credentials等）
  ],
  session: {
    strategy: "jwt", // 用JWT策略时需要同步更新JWT内容
  },
  callbacks: {
    async jwt({ token, user }) {
      // 初次登录时记录用户ID
      if (user) token.id = user.id;
      // 每次生成JWT时，从数据库拉取最新用户信息
      const latestUser = await getUserById(token.id);
      if (latestUser) {
        token.name = latestUser.name;
        // 其他需要实时同步的用户字段也在这里更新
      }
      return token;
    },
    async session({ session, token }) {
      // 将更新后的JWT数据同步到会话对象
      session.user.name = token.name;
      session.user.id = token.id;
      return session;
    },
  },
});

如果用的是database会话策略，直接在session回调里从数据库查询最新用户数据返回即可，不用处理JWT部分。

进阶优化（可选） #

管理员修改用户信息后，还可以通过WebSocket或SSE主动通知目标用户的客户端刷新会话，这样用户不用手动刷新就能看到变更，但基础场景用上面两种方案就足够解决问题。

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