JWT全栈Token验证前端失效问题排查

核心错误：Axios请求头配置错误 #

你前端的userRequest配置里，错误地用自定义bearer字段传递Token，而Axios需要通过headers的Authorization字段来设置JWT认证头，这是Token未正确传递到后端的直接原因。

修正后的requestMethods代码：

import axios from "axios";

const BASE_URL = "http://localhost:5000/api/";

const user = JSON.parse(localStorage.getItem("persist:root"))?.user;
const currentUser = user && JSON.parse(user).currentUser;
const TOKEN = currentUser?.accessToken;

export const publicRequest = axios.create({
  baseURL: BASE_URL,
});

export const userRequest = axios.create({
  baseURL: BASE_URL,
  headers: { Authorization: `Bearer ${TOKEN}` } // 修正为标准的请求头配置
});

其他需要排查的点 #

1. 确认TOKEN是否正确获取 #

在requestMethods文件中添加打印语句，验证TOKEN是否有效：

console.log("当前获取的TOKEN:", TOKEN);

如果TOKEN为undefined，说明localStorage中的用户数据解析存在问题，需要检查：

• persist:root是否正确存储了用户信息
• currentUser是否存在，accessToken字段是否正确

2. 后端VerifyToken逻辑漏洞 #

你的verifyToken中间件在JWT验证失败时，返回403响应但未终止后续代码执行，会导致req.user = user和next()继续运行，可能引发逻辑错误，需添加return：

const verifyToken = (req, res, next) => {
  const authHeader = req.headers.token;
  if (authHeader) {
    const token = authHeader.split(" ")[1];
    jwt.verify(token, process.env.JWT_SEC, (err, user) => {
      if (err) return res.status(403).json("Token is not valid!"); // 添加return终止后续逻辑
      req.user = user;
      next();
    });
  } else {
    return res.status(401).json("You are not authenticated!");
  }
};

3. 前端请求异步处理优化 #

你的updateUser函数未处理异步请求错误，也未使用await，无法捕获请求失败的具体原因，建议修改为：

const updateUser = async () => {
  try {
    await userRequest.put(`users/updateUser/${user._id}`, userData);
    console.log('你的数据已更新为', userData);
  } catch (error) {
    console.error('更新失败:', error.response.data); // 打印后端返回的错误信息，便于排查
  }
};

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