React调用授权API返回401 Unauthorized‘Invalid token’问题排查

核心问题分析 #

1. 前后端Token传递方式不匹配：前端将JWT存在localStorage，请求时通过Authorization: Bearer <token>头传递，但后端代码是从req.cookies.jwtToken中读取Token，导致后端根本获取不到正确的Token，进而触发Invalid token错误，查询不到用户（rootUser为undefined）。
2. 前端冗余错误导入：代码中导入了jsonwebtoken但未使用，且导入方式错误（应为默认导入而非解构导入）。
3. 后端错误处理不明确：未区分"Token不存在"、"Token无效"、"用户不存在"等不同错误场景，不利于排查问题。

修复步骤 #

前端代码修改 #

1. 移除未使用的jsonwebtoken导入：

// 删掉这一行
import {jwt} from 'jsonwebtoken'

2. （可选）优化请求头：GET请求无需设置Content-Type: application/json，可移除该头：

headers: {
  Accept: 'application/json',
  'Authorization': `Bearer ${localStorage.getItem('jwtToken')}`,
},

后端代码修改 #

调整Token获取逻辑，改为从Authorization头读取Token，并完善错误处理：

const jwt = require("jsonwebtoken");
const Users = require("../model/loginUserSchema");

const Authenticate = async (req, res, next) => {
  try {
    // 从Authorization头提取Token
    const authHeader = req.headers.authorization;
    const token = authHeader && authHeader.split(' ')[1]; // 拆分"Bearer <token>"，取第二部分

    if (!token) {
      return res.status(401).send('Unauthorized: No token provided');
    }

    const verifyToken = jwt.verify(token, "thisIsMyNewCourse");
    // 查询用户，同时验证Token是否在用户的tokens列表中
    const rootUser = await Users.findOne({ 
      _id: verifyToken._id, 
      "tokens.token": token 
    });

    if (!rootUser) {
      throw new Error('User not found');
    }

    req.token = token;
    req.rootUser = rootUser;
    req.userID = rootUser._id;
    next();
  } catch (err) {
    // 根据错误类型返回更明确的信息
    if (err.name === 'JsonWebTokenError') {
      res.status(401).send('Unauthorized: Invalid token');
    } else {
      res.status(401).send(`Unauthorized: ${err.message}`);
    }
  }
};
module.exports = Authenticate;

额外验证点 #

• 确认登录成功后，前端确实将JWT存入了localStorage的jwtToken键中。
• 检查后端生成Token时，是否将Token同时存入了用户文档的tokens数组（确保findOne的"tokens.token": token条件能匹配到数据）。

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