Next.js 14中如何从服务端组件获取Local Storage里的JWT Token？

一、服务端组件获取LocalStorage中Token的解决方案 #

服务端组件运行在服务器环境，无法直接访问浏览器的LocalStorage，必须通过客户端到服务端的传递机制实现，推荐两种可行方案：

方案1：将Token同步到Cookie，服务端组件直接读取Cookie #

这是最安全且符合Next.js架构的方式：

• 登录成功后，除了把Token存入LocalStorage，调用内部API路由（比如/api/set-token），在该路由中用cookies().set()将Token设置为HttpOnly、Secure的Cookie（HTTPS环境下启用），避免XSS攻击
• 在服务端组件中，通过next/headers提供的cookies()函数读取Cookie中的Token，用于后续API请求

  // 服务端组件示例
  import { cookies } from 'next/headers';
  
  async function ServerComponent() {
    const token = cookies().get('auth-token')?.value;
    if (!token) {
      return <div>请先登录</div>;
    }
    // 携带Token调用外部API
    const response = await fetch('https://your-api.com/data', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    const data = await response.json();
    return <div>{JSON.stringify(data)}</div>;
  }
  
  export default ServerComponent;
  

方案2：通过客户端组件中转到内部API路由 #

如果不想依赖Cookie，可通过客户端组件作为中间层传递Token：

• 客户端组件从LocalStorage取出Token，调用内部API路由时在请求头中携带Token
• 服务端组件调用该内部API路由，由内部路由负责转发请求到外部API并带上Token

  // 客户端组件（负责调用内部API）
  'use client';
  
  import { useEffect, useState } from 'react';
  
  function ClientComponent() {
    const [data, setData] = useState(null);
  
    useEffect(() => {
      async function fetchData() {
        const token = localStorage.getItem('auth-token');
        if (!token) return;
        const res = await fetch('/api/fetch-data', {
          headers: {
            Authorization: `Bearer ${token}`
          }
        });
        const result = await res.json();
        setData(result);
      }
      fetchData();
    }, []);
  
    return <div>{data ? JSON.stringify(data) : '加载中...'}</div>;
  }
  
  // 内部API路由 /api/fetch-data/route.ts
  export async function GET(request: Request) {
    const authHeader = request.headers.get('Authorization');
    if (!authHeader) {
      return new Response('未授权', { status: 401 });
    }
    // 转发请求到外部API
    const response = await fetch('https://your-api.com/data', {
      headers: {
        Authorization: authHeader
      }
    });
    const data = await response.json();
    return Response.json(data);
  }
  

二、用Context存储Token是不是最佳实践？ #

Context存储Token是合理的客户端状态管理方式，但需结合场景判断：

• 适用场景：当多个客户端组件需要共享登录状态/Token时，Context可以避免props drilling（层层传递属性），简化状态管理
• 注意事项：
  • Context仅在客户端生效，服务端组件无法访问其中的Token，服务端API请求仍需依赖Cookie或内部API路由中转
  • Context是内存状态，页面刷新后会丢失，必须在客户端初始化时（比如useEffect）从LocalStorage/Cookie读取Token并同步到Context
  • 不要在服务端渲染的组件中使用Context，否则会导致状态不一致
• 优化建议：如果项目规模较大，可结合Zustand、Jotai等轻量状态库管理Token，比Context更灵活，能避免不必要的组件重渲染

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