Next.js App Router：如何通过localStorage中的Token实现服务端数据获取？

1. 如何在服务端获取请求上下文提取Token #

完全可以在服务端获取当前请求的上下文（包括HTTP头、Cookie），Next.js App Router提供了原生API实现：

• 若JWT Token通过请求头传递（比如前端请求页面时携带Authorization头），可在服务端组件/函数中用headers()函数获取：

  import 'server-only'
  import { headers } from 'next/headers'
  
  export async function getData() {
    const headersList = headers()
    const authHeader = headersList.get('Authorization')
  
    if (!authHeader) {
      throw new Error('Authorization header missing')
    }
  
    const res = await fetch('http://localhost:3333/<endpoint>', {
      headers: {
        Authorization: authHeader
      }
    })
   
    if (!res.ok) {
      throw new Error('Failed to fetch data')
    }
  
    return await res.json()
  }
  

• 若Token存储在HTTP Only Cookie中（更安全的方式，可避免XSS攻击），用cookies()函数获取：

  import 'server-only'
  import { cookies } from 'next/headers'
  
  export async function getData() {
    const token = cookies().get('authToken')?.value
  
    if (!token) {
      throw new Error('Token not found in cookies')
    }
  
    const res = await fetch('http://localhost:3333/<endpoint>', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
   
    if (!res.ok) {
      throw new Error('Failed to fetch data')
    }
  
    return await res.json()
  }
  

之后直接在服务端组件（无'use client'指令）中调用getData即可，无需在客户端组件导入：

// 服务端组件示例
import getData from '@/lib/getData'

export default async function ProtectedPage() {
  const data = await getData()
  return <div>{JSON.stringify(data)}</div>
}

2. 关于设计模式的疑问 #

你没有违背设计模式，受保护的数据恰恰应该优先在服务端获取，核心原因：

• 安全性：服务端获取时，Token不会暴露在客户端代码或浏览器控制台，能降低被恶意脚本窃取的风险。
• 性能：可利用Next.js的缓存机制（如fetch的缓存配置），减少客户端请求开销，还能实现静态生成、增量静态再生等优化。
• 符合官方推荐：Next.js强调服务端数据获取，正是为了兼顾安全与性能。

你之前的问题源于错误尝试在客户端组件导入服务端函数，正确路径是直接在服务端组件调用服务端数据函数，或通过Server Actions实现客户端触发的服务端数据获取。

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