Next.js 14中不使用localStorage，如何为SSR存储JWT Token？

核心方案：改用HttpOnly Cookie存储JWT #

服务端组件无法访问浏览器的localStorage，但可以读取请求中的Cookie，所以将JWT存入HttpOnly Cookie是适配SSR的最佳方式，同时还能提升Token的安全性（避免XSS窃取）。

1. 登录成功后在客户端组件中设置Cookie #

登录逻辑必须放在客户端组件（添加'use client'指令），因为需要操作浏览器Cookie。用Next.js自带的cookies()函数来设置：

'use client';

import { cookies } from 'next/headers';

async function handleLogin(username, password) {
  // 调用后端登录接口获取JWT
  const res = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ username, password }),
    headers: { 'Content-Type': 'application/json' },
  });
  const data = await res.json();

  if (data.token) {
    // 设置HttpOnly Cookie，配置安全属性
    cookies().set('auth_token', data.token, {
      httpOnly: true, // 关键：禁止前端JS访问，防XSS
      secure: process.env.NODE_ENV === 'production', // 生产环境强制HTTPS传输
      sameSite: 'strict', // 抵御CSRF攻击
      maxAge: 60 * 60 * 24 * 7, // 有效期7天
      path: '/', // 全站可访问
    });

    // 登录成功后跳转至目标页面
    window.location.href = '/dashboard';
  }
}

2. 服务端组件中读取Cookie获取Token #

在服务端组件里直接用cookies()函数读取Token，用于SSR数据请求：

import { cookies, redirect } from 'next/headers';

async function DashboardPage() {
  const token = cookies().get('auth_token')?.value;
  
  if (!token) {
    // 未登录状态，跳转至登录页
    return redirect('/login');
  }

  // 携带Token调用后端接口，完成SSR数据渲染
  const res = await fetch('/api/user/profile', {
    headers: { Authorization: `Bearer ${token}` },
    cache: 'no-store', // 避免缓存未授权内容
  });
  const user = await res.json();

  return (
    <div>
      <h1>欢迎 {user.name}</h1>
      {/* 渲染用户专属内容 */}
    </div>
  );
}

export default DashboardPage;

3. 后端配合优化（可选） #

如果让后端直接返回Set-Cookie响应头，客户端无需手动设置Cookie，安全性更高：

// 后端登录接口示例（Node.js/Express）
app.post('/api/login', async (req, res) => {
  const { username, password } = req.body;
  // 用户验证逻辑...
  const token = generateJwtToken(validatedUser);

  // 后端直接设置HttpOnly Cookie
  res.cookie('auth_token', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
    maxAge: 60 * 60 * 24 * 7,
    path: '/',
  });

  res.json({ success: true });
});

关键注意事项 #

• 务必开启httpOnly属性，避免前端JS读取Token，降低XSS攻击风险。
• 生产环境强制开启secure属性，确保Cookie仅在HTTPS连接下传输。
• 服务端组件中调用cookies()时，必须在组件的异步逻辑内执行，不能在组件顶层调用。

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