如何在页面每次重载时通过API获取数据更新Next Auth Session？

核心思路 #

每次页面重载时，通过API拉取最新用户数据，再调用Next Auth的update方法覆盖现有session中的用户信息，确保页面显示的用户详情是最新的。

实现步骤 #

• 在页面组件中，使用Next.js的useEffect钩子监听页面初始化（重载时会触发这个生命周期）。
• 通过useSession钩子获取当前session实例和update方法。
• 在useEffect内部调用用户信息API，拿到最新数据后调用update方法更新session。

代码示例 #

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

const UserProfilePage = () => {
  const { data: session, update } = useSession();

  useEffect(() => {
    // 页面重载时执行
    const fetchAndUpdateUser = async () => {
      try {
        // 调用API获取最新用户数据
        const res = await fetch('/api/user/profile');
        if (!res.ok) throw new Error('Failed to fetch user data');
        
        const latestUser = await res.json();
        
        // 更新Next Auth Session，替换用户信息
        await update({
          ...session,
          user: {
            ...session?.user,
            ...latestUser
          }
        });
      } catch (err) {
        console.error('Failed to update session:', err);
      }
    };

    // 仅当session存在时执行（避免未登录状态下调用API）
    if (session) {
      fetchAndUpdateUser();
    }
  }, [session, update]); // 依赖session和update，确保状态变化时重新执行

  return (
    <div>
      <h1>用户详情</h1>
      {session?.user && (
        <div>
          <p>用户名：{session.user.name}</p>
          <p>邮箱：{session.user.email}</p>
          {/* 其他用户字段 */}
        </div>
      )}
    </div>
  );
};

export default UserProfilePage;

额外注意事项 #

• 确保API接口/api/user/profile能正确返回当前登录用户的最新数据，需要在API路由中验证用户身份（比如通过getServerSession）。
• 如果需要在全局所有页面都执行这个逻辑，可以把这段代码封装成自定义Hook，在_app.tsx中使用，实现全局session更新。
• 处理加载状态：可以添加loading状态，在API请求完成前显示加载提示，提升用户体验。

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