Next.js 13 App目录中获取/解密Token及服务端组件读取Cookie问题

获取Token #

• 服务端组件：使用next/headers提供的cookies()方法直接读取请求Cookie：

  import { cookies } from "next/headers";
  
  export default function ServerComponent() {
    const cookieStore = cookies();
    const token = cookieStore.get("token")?.value;
    return <div>Token: {token}</div>;
  }
  

• 客户端组件：用next/navigation的useCookies钩子或直接操作document.cookie：

  "use client";
  import { useCookies } from "next/navigation";
  
  export default function ClientComponent() {
    const cookies = useCookies();
    const token = cookies.get("token");
    return <div>Token: {token}</div>;
  }
  

• Middleware：通过NextRequest对象的cookies属性读取：

  import { NextRequest } from "next/server";
  
  export function middleware(req: NextRequest) {
    const token = req.cookies.get("token")?.value;
  }
  

解密Token（以JWT为例） #

• 服务端解密：用jsonwebtoken库在服务端组件或Middleware中解密，避免密钥暴露在客户端：

  import jwt from "jsonwebtoken";
  import { cookies } from "next/headers";
  
  export default function ServerComponent() {
    const cookieStore = cookies();
    const token = cookieStore.get("token")?.value;
    if (token) {
      try {
        const decoded = jwt.verify(token, process.env.JWT_SECRET!);
        return <div>Decoded: {JSON.stringify(decoded)}</div>;
      } catch (err) {
        return <div>Invalid token</div>;
      }
    }
    return <div>No token found</div>;
  }
  

• 注意：不要在客户端解密含敏感信息的Token，建议在服务端解密后将所需数据通过props传递给客户端。

你的问题核心是修改req.cookies不会将Cookie发送到浏览器——req.cookies只是请求的Cookie对象，要设置响应Cookie必须通过NextResponse操作。修改后的Middleware代码如下：

import { NextRequest, NextResponse } from "next/server"

export function middleware(req: NextRequest) {
  if (req.nextUrl.pathname === "/") {
    // 创建响应对象
    const response = NextResponse.next();
    
    if (!req.cookies.has("userId")) {
      // 在响应对象上设置Cookie，可添加安全配置
      response.cookies.set("userId", "12345", {
        httpOnly: true,
        path: "/",
        maxAge: 60 * 60 * 24 * 7 // 7天过期
      });
      console.log("set new userId cookie");
    } else {
      const userId = req.cookies.get("userId")?.value;
      console.log("Existing userId:", userId);
    }
    
    // 返回修改后的响应
    return response;
  }
  return NextResponse.next();
}

export const config = {
  matcher: "/"
}

修改后，浏览器开发者工具能看到userId Cookie，服务端组件可正常读取，后续请求会触发else分支。

内容的提问来源于stack exchange，提问作者Damien Sullivan