Next.js中间件中无法获取NextRequest的token属性问题

问题根源 #

你打印的cookies看起来是普通对象，但实际上它是Next.js的RequestCookies实例，并非原生JS字面量对象。控制台的打印结果只是它的字符串化展示，实际不能直接用.语法访问属性，这就是cookies.token返回undefined的核心原因。

解决方法 #

Next.js为RequestCookies提供了专门的操作方法，正确的做法是用get()方法获取指定Cookie，再从返回的字符串中提取纯token内容：

修改后的代码示例：

import { NextRequest, NextResponse } from "next/server";
import { verify } from "jsonwebtoken";

const SECRET = process.env.SECRET;

export function middleware(req) {
  const cookies = req.cookies;
  const url = req.url;
  
  if (url.includes("/admin")) {
      // 用get方法获取目标cookie
      const tokenCookie = cookies.get('token');
      if (tokenCookie) {
          // 从cookie字符串中提取纯token（去掉前缀和路径参数）
          const token = tokenCookie.split(';')[0].split('=')[1];
          console.log('提取到的有效token:', token);
          
          // 可在此添加JWT验证逻辑
          // try {
          //   const decoded = verify(token, SECRET);
          //   // 验证通过，继续处理请求
          // } catch (err) {
          //   // 验证失败，重定向到登录页
          //   return NextResponse.redirect(new URL('/login', req.url));
          // }
      }
  }

  return NextResponse.next();
}

额外说明 #

• 若要查看Cookie的真实结构，可以将RequestCookies转为数组：

  console.log(Array.from(cookies));
  // 输出格式示例: [{ name: 'token', value: 'token=myToken; Path=/' }]
  

• RequestCookies还提供了has(name)（判断Cookie是否存在）、set(name, value)（设置Cookie）等方法，是官方推荐的Cookie操作方式。

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