Next.js 13：利用localStorage中accessToken自动获取用户数据及组件咨询

完全可以实现，不过要注意Next.js 13的组件类型限制——localStorage是浏览器端API，只能在客户端组件中使用，服务器组件无法访问window对象，所以相关逻辑必须放在客户端组件里。

代码放置位置建议 #

推荐把自动获取用户数据的逻辑放在以下两种地方：

• 根布局（app/layout.tsx）中的客户端组件部分
• 专门封装的用户状态管理组件（比如components/AuthProvider.tsx），再在需要的地方引入

具体实现示例 #

1. 创建客户端组件处理用户数据获取 #

新建components/UserDataFetcher.tsx，开头加上'use client'声明这是客户端组件：

'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

interface UserData {
  id: string;
  name: string;
  email: string;
}

export default function UserDataFetcher() {
  const [user, setUser] = useState<UserData | null>(null);
  const [loading, setLoading] = useState(true);
  const router = useRouter();

  useEffect(() => {
    const fetchUserData = async () => {
      // 从localStorage读取accessToken
      const accessToken = localStorage.getItem('accessToken');
      
      if (!accessToken) {
        // 没有token，跳转到登录页
        router.push('/login');
        setLoading(false);
        return;
      }

      try {
        // 请求用户数据接口
        const res = await fetch('/api/user', {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });

        if (!res.ok) {
          // token无效或过期，清除token并跳转登录
          localStorage.removeItem('accessToken');
          router.push('/login');
          throw new Error('Failed to fetch user data');
        }

        const userData = await res.json();
        setUser(userData);
      } catch (err) {
        console.error('获取用户数据失败:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchUserData();
  }, [router]);

  // 可以把用户数据通过props或Context传递给其他组件
  if (loading) return <div>加载中...</div>;
  return null; // 如果只是用来初始化用户状态，不需要渲染UI
}

2. 在根布局中引入该组件 #

修改app/layout.tsx，引入刚才的客户端组件：

import UserDataFetcher from '@/components/UserDataFetcher';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <UserDataFetcher />
        {children}
      </body>
    </html>
  );
}

额外注意事项 #

• 如果需要在多个组件中共享用户数据，建议结合React Context封装一个全局的Auth Context，避免重复逻辑
• 处理token过期时，要及时清除localStorage中的无效token，避免重复请求
• 服务器组件如果需要用户数据，可以通过客户端组件传递props，或者在API路由中验证token后返回数据

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