Next-Auth加载完成后如何获取Session数据？页面阻塞方案求助

架构老林

2026-8-13

解决方案

useSession 返回的 status 字段可以直接用来判断会话状态：它包含 "loading"、"authenticated"、"unauthenticated" 三个可选值。你可以利用这个状态控制页面渲染逻辑，在加载期间显示阻塞性的加载界面，等会话加载完成后再处理数据并渲染正常内容。

修改后的代码示例

const { data: session, status } = useSession();
const [user, setUser] = useState(null);

// 监听会话状态和数据变化，确保加载完成后再处理
useEffect(() => {
  // 仅当会话已认证且存在有效数据时，解析cookie并更新用户状态
  if (status === "authenticated" && session) {
    const { data } = getCookieData(session);
    if (data) {
      setUser(data.user);
    }
  }
}, [session, status]); // 添加依赖，确保状态变化时重新执行回调

// 加载期间阻塞页面，显示加载组件
if (status === "loading") {
  return <div>加载中...</div>; // 可替换为自定义加载动画/骨架屏
}

// 会话未认证的场景（可选处理）
if (status === "unauthenticated") {
  return <div>请先登录</div>;
}

// 加载完成且已认证，渲染正常页面内容
return (
  <div>
    <p>当前用户：{user?.name}</p>
    {/* 其他页面内容 */}
  </div>
);

关键说明

修正依赖数组：原代码的useEffect依赖为空数组，只会执行一次，此时会话大概率还在加载中返回null。添加session和status作为依赖后，每当会话状态或数据更新时都会重新执行回调，确保能拿到有效数据。
状态分支渲染：通过status判断，在loading状态时直接返回加载界面，阻止后续页面内容渲染，实现"阻塞页面"的需求；会话加载完成后再处理数据并渲染正常内容。
安全校验：处理会话数据前增加status === "authenticated"和session存在的判断，避免因null值引发的报错。