如何使用Node.js处理认证头？JWT认证页面无限加载问题求解

问题原因分析 #

• 三次控制台输出对应三次不同的服务端请求：
  1. 第一次输出undefined：对应你直接在浏览器地址栏访问/:id的页面导航请求，浏览器发起的普通页面GET请求默认不会携带自定义的Authorization请求头，因此req.headers.authorization为空。
  2. 第二次打印出完整Bearer令牌：对应test.html加载完成后，index_client.js里的AJAX请求自动从localStorage读取token添加到请求头，因此能正常获取到authorization值。
  3. 第三次输出undefined：对应浏览器自动发起的网站图标/favicon.ico请求，该请求同样不会携带自定义认证头。
• 页面无限加载空白的核心原因：你的checkToken中间件只处理了存在认证头的分支（调用next()），如果认证头不存在，没有任何返回响应或者放行的逻辑，导致首次页面导航请求直接被挂起，浏览器一直等待服务端返回内容。

修复方案 #

1. 补全checkToken中间件的分支逻辑，认证不通过时直接返回错误响应，不要让请求挂起：

module.exports = function(req, res, next) {
    if (req.headers.authorization) {
         console.log(req.headers.authorization);
         next();
    } else {
         // 认证失败返回401状态码，禁止留空分支导致请求挂起
         res.status(401).json({code: 401, msg: '未携带有效认证信息'})
    }
}

2. 建议把页面路由和API接口路由拆分：普通页面路由不需要走token校验，需要鉴权的业务API接口统一加/api前缀，只给这部分路由加checkToken中间件，避免页面导航请求被拦截。
3. 你当前的逻辑存在设计冲突：首次访问页面时localStorage大概率还没有存储token，直接给页面路由加token校验不符合常规业务逻辑，普通页面请求不需要携带自定义认证头，认证逻辑只需要作用在业务数据接口上即可。

内容的提问来源于stack exchange，提问作者jun0911.Dev