Nodejs+HandlebarsJs实现JWT认证时中间件读取token为undefined怎么办

核心问题排查 #

你当前的auth中间件默认从服务端Cookie读取token，出现undefined的常见原因和解决方法如下：

• 未安装cookie-parser中间件：Express原生不支持解析请求Cookie，req.cookies需要依赖该插件才能正常读取值
  1. 安装依赖：npm install cookie-parser
  2. 在Express入口文件（app.js/index.js）的路由注册前加载中间件：

  const cookieParser = require('cookie-parser');
  app.use(cookieParser());
  

• Cookie作用域不匹配：设置Cookie时未指定全局路径，导致仅生成Cookie的接口同级路径可访问
  修改Cookie设置代码，添加全局路径配置：

  res.cookie('token', token, {
      httpOnly: true,
      path: '/',
      maxAge: 7 * 24 * 60 * 60 * 1000 // 可选，设置7天有效期
  });
  

• 异步请求未携带Cookie：前端用Fetch/Axios发请求时，默认不会自动带Cookie，需要手动开启凭证配置
  • Fetch请求添加配置：

  fetch('/待请求的接口地址', {
    credentials: 'include'
  })
  

  • Axios请求添加配置：

  axios.get('/待请求的接口地址', {
    withCredentials: true
  })
  

• 若你希望使用localStorage存储的token做认证，需要修改中间件的token读取逻辑：

  // 将auth.js中 const token = req.cookies.token; 替换为以下代码
  const token = req.headers.authorization?.split(' ')[1];
  

  同时前端发请求时手动携带localStorage中的token：

  fetch('/待请求的接口地址', {
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    }
  })
  

冗余逻辑优化 #

你当前代码中不需要把token传给Handlebars模板存入localStorage：你已经设置了httpOnly: true的Cookie，本身就无法被前端JS读取，存入localStorage的token仅为渲染时的临时值，无法同步后续的token更新，反而会增加安全风险，建议删除该逻辑。

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