Next.js Cookie认证问题：Admin布局中token值获取为undefined

看起来你遇到了服务器组件（Admin布局）无法读取登录时设置的token cookie的问题，我帮你一步步排查和解决：

一、先解决token为undefined的核心问题 #

1. 排查Cookie的SameSite与Secure配置冲突 #

你的后端和前端都设置了sameSite: "None"，但这个配置必须配合secure: true（即HTTPS环境）才能生效。在开发环境下（通常是HTTP），浏览器会拒绝存储这种Cookie，导致服务器端根本拿不到token。

修改后端的Cookie设置：

res.cookie("token", token, {
  httpOnly: true,
  secure: process.env.NODE_ENV === "production",
  sameSite: process.env.NODE_ENV === "production" ? "None" : "Lax", // 开发环境用Lax
  maxAge: 3600 * 1000,
});

同步修改前端Cookies.set的配置：

Cookies.set("token", token, {
  path: "/",
  expires: 1 / 24,
  secure: process.env.NODE_ENV === "production",
  sameSite: process.env.NODE_ENV === "production" ? "None" : "Lax", // 和后端保持一致
});

2. 验证Cookie是否被正确存储 #

打开浏览器开发者工具 → Application → Cookies → 查看当前域名下是否存在token字段：

• 如果没有，说明上述配置修改还没生效，或者后端设置Cookie时的domain/path有问题（localhost环境下默认domain是localhost，path设为"/"即可）。
• 如果有，再检查服务器组件的cookies()调用是否正确，你当前的写法是对的，确保布局组件是服务器组件（没有加"use client"）。

3. 避免硬编码JWT_SECRET #

你的Admin布局里硬编码了JWT_SECRET = "*******"，建议改成读取环境变量：

const JWT_SECRET = process.env.JWT_SECRET;

确保你的.env.local文件里配置了这个变量，Next.js服务器组件可以直接读取非NEXT_PUBLIC_开头的环境变量。

二、其他路由保护方案推荐 #

除了你当前用的「Middleware + 服务器布局验证」，还有两种更简洁的方式：

1. 在Middleware中完成全量权限验证 #

把角色验证逻辑移到Middleware里，这样请求到达页面之前就完成拦截，更高效：

import { NextResponse } from "next/server";
import jwt from "jsonwebtoken";

const PUBLIC_PATHS = ["/login", "/unauthorized"];
// 定义需要admin权限的路由前缀
const ADMIN_ROUTES = ["/products"];

export function middleware(request) {
  const { pathname } = request.nextUrl;
  const token = request.cookies.get("token")?.value;
  const isPublic = PUBLIC_PATHS.some(path => pathname.startsWith(path));

  // 未登录访问非公开路由，跳登录
  if (!token && !isPublic) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  // 已登录但访问admin路由，验证角色
  if (token && ADMIN_ROUTES.some(route => pathname.startsWith(route))) {
    try {
      const user = jwt.verify(token, process.env.JWT_SECRET);
      if (user.role !== "admin") {
        return NextResponse.redirect(new URL("/unauthorized", request.url));
      }
    } catch (err) {
      // token无效，清除cookie并跳登录
      const response = NextResponse.redirect(new URL("/login", request.url));
      response.cookies.delete("token");
      return response;
    }
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!_next|favicon.ico|api).*)"],
};

这种方式下，你可以去掉Admin布局里的验证逻辑，简化代码。

2. 使用NextAuth.js（适合复杂场景） #

如果你的项目后续需要支持OAuth（如Google、GitHub登录）或者更完善的会话管理，可以用NextAuth.js的凭证登录模式，它会自动处理Cookie存储、会话验证等逻辑，减少自定义代码的工作量。

总结 #

先优先解决Cookie的配置问题，确保开发环境下Cookie能被浏览器正确存储，这样服务器组件就能读取到token。之后可以根据项目复杂度选择更合适的路由保护方案。

内容来源于stack exchange