Next.js App Router页面刷新时Cookie验证用户会话的问题

错误原因分析 #

你的代码有两个核心问题：

1. 根布局是服务器组件，但useUser是客户端钩子，服务器组件无法调用客户端的React钩子
2. UserProvider在布局中渲染，但getData函数在UserProvider初始化前就调用了useUser，上下文还未生效

正确实现方案 #

1. 根布局（服务器组件）：处理服务器端会话验证

根布局作为服务器组件，负责从请求Cookie中获取token、调用API验证会话，并将验证结果传递给客户端组件。

import { cookies } from 'next/headers';
import axios from 'axios';
import { UserProvider } from '@/context/UserContext';
import ClientSessionInitializer from '@/components/ClientSessionInitializer';

export default async function RootLayout({ children }) {
  const cookieStore = cookies();
  const token = cookieStore.get('auth_token')?.value;
  let userData = null;

  if (token) {
    try {
      const response = await axios.get('https://your-api-endpoint/user', {
        headers: { Authorization: `Bearer ${token}` }
      });
      userData = response.data.user;
    } catch (error) {
      // 服务器端直接清除无效Cookie
      cookieStore.delete('auth_token', { path: '/' });
      console.error('会话验证失败:', error);
    }
  }

  return (
    <html lang="en">
      <body>
        <UserProvider>
          {/* 客户端组件负责初始化用户状态 */}
          <ClientSessionInitializer initialUser={userData} />
          {children}
        </UserProvider>
      </body>
    </html>
  );
}

2. 客户端组件：初始化用户上下文

创建专门的客户端组件，在UserProvider生效后，使用useUser钩子设置用户数据。

'use client';

import { useEffect } from 'react';
import { useUser } from '@/context/UserContext';
import Cookies from 'js-cookie';

export default function ClientSessionInitializer({ initialUser }) {
  const { setUser } = useUser();

  useEffect(() => {
    if (initialUser) {
      setUser(initialUser);
    } else {
      // 客户端兜底清除无效Cookie
      Cookies.remove('auth_token');
    }
  }, [initialUser, setUser]);

  return null; // 仅处理逻辑，无需渲染UI
}

关键优化点 #

• 服务器端使用next/headers的cookies()获取Cookie，替代客户端的js-cookie库
• 将会话验证逻辑拆分到服务器端（根布局）和客户端（状态初始化组件），避免跨环境调用冲突
• 服务器端直接处理无效Cookie的清除，确保后续请求不再携带无效token
• 客户端通过useEffect在上下文生效后初始化用户状态，符合React钩子的使用规则

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