如何在Next.js中间件中解码Token？解决window未定义报错问题

这个报错的核心原因很明确：Next.js的中间件运行在服务器端或Edge Runtime环境中，不存在浏览器专属的window全局对象，直接调用window.btoa/window.atob自然会报错。不过别担心，我们可以用Node.js/Edge Runtime原生支持的API来完成Base64解码操作，下面是具体解决方案：

正确的解码实现方式 #

先明确两个关键细节：

1. cookies.get('_SYS_USER_AUTH')返回的是包含value属性的对象（Cookie存在时），必须先取出value再操作；
2. 你在组件中用window.btoa编码了数据，所以中间件里应该做解码而非再次编码（原代码里的window.btoa(jwt)是反向操作）。

方案1：使用Buffer API（推荐） #

Buffer是Node.js和Next.js Edge Runtime都支持的API，用法简单且兼容性拉满：

export function middleware(request) {
  const { cookies } = request;
  const authCookie = cookies.get(`_SYS_USER_AUTH`);

  if (request.nextUrl.pathname.startsWith("/account") && authCookie) {
    try {
      // 解码Base64格式的Cookie值
      const decodedData = Buffer.from(authCookie.value, 'base64').toString('utf8');
      console.log('解码后的用户授权数据:', decodedData);

      // 如果原始数据是JSON格式，可进一步解析为对象
      const userAuthData = JSON.parse(decodedData);
      console.log('解析后的用户对象:', userAuthData);
    } catch (error) {
      console.error('Cookie解码失败:', error);
      // 这里可添加错误处理逻辑，比如重定向到登录页
    }
  }
}

方案2：使用全局atob函数 #

Node.js 16+和Edge Runtime都支持全局的atob函数（功能和浏览器window.atob一致），如果你的数据不含Unicode特殊字符，也可以直接用它：

export function middleware(request) {
  const { cookies } = request;
  const authCookie = cookies.get(`_SYS_USER_AUTH`);

  if (request.nextUrl.pathname.startsWith("/account") && authCookie) {
    try {
      const decodedData = atob(authCookie.value);
      console.log('解码后的用户授权数据:', decodedData);
    } catch (error) {
      console.error('Cookie解码失败:', error);
    }
  }
}

额外注意事项 #

• 务必先检查authCookie是否存在再操作，避免出现Cannot read properties of null (reading 'value')的报错；
• 如果原始数据包含Unicode字符，浏览器端的btoa会报错，建议组件端也改用Buffer编码（保证编码解码一致性）：

  // 组件端编码兼容Unicode的写法
  const encodedData = Buffer.from(JSON.stringify(res?.data)).toString('base64');
  setCookie("_SYS_USER_AUTH", encodedData);
  

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