React前端通过Axios向Node.js API传递JWT请求头遇问题

下面是针对你问题的具体修复方案，按优先级排序：

1. 修正Axios GET请求参数格式 #

你的React组件里Axios GET请求的写法错误，Axios的get方法签名是axios.get(url[, config])，第二个参数直接传配置对象即可，不需要额外传空对象。错误写法会导致请求头配置不生效，API根本收不到x-auth-token。

修复后代码：

const [count, setCount] = useState(null);

const token = localStorage.getItem("x-auth-token");

useEffect(() => {
  const config = {
    headers: { 
      "x-auth-token": token,
      "Content-type": "application/json"
    },
  };

  api.get("/students/", config).then((response) => {
    setCount(response.data);
  });
}, [token]);

if (!count) return null;

2. 统一JWT生成与验证的密钥 #

API端生成JWT用的密钥是"HeyImaPrivateKeyyy"，但验证中间件里用的是"DemoPrivateKey"，密钥不匹配会直接导致验证失败，即使token正确传递也会报错。

修复中间件的密钥：

const decoded = jwt.verify(token, "HeyImaPrivateKeyyy"); // 和生成token的密钥保持一致

3. 修复前端JWT解码逻辑 #

登录代码里的let token = jwt(res.data.token);写法错误：

• 如果你用的是后端的jsonwebtoken库，前端解码应该用jwt.decode()而非直接调用jwt()；
• 更推荐前端用轻量的jwt-decode库（专门为前端设计），避免引入冗余的后端库。

先安装依赖：npm install jwt-decode，再修复代码：

import jwtDecode from "jwt-decode";

const login = async ({ email, password }) => {
  const res = await api.post(
    "/auth",
    { email, password },
    {
      headers: {
        "Content-type": "application/json",
        Authorization: false,
      },
    }
  );
  const { from } = state || {};

  const decodedToken = jwtDecode(res.data.token);

  setToken("x-auth-token", res.data.token); // 存原始token字符串，不是解码后的对象
  localStorage.setItem("x-auth-token", res.data.token);
  localStorage.setItem("userLogged", true);
  localStorage.setItem("name", decodedToken.firstName);
  localStorage.setItem("role", decodedToken.role);
  navigate("/auth/dashboard" || from.pathname, { replace: true });
};

4. 修正API验证中间件逻辑 #

你的中间件逻辑存在漏洞，比如未处理auth变量未定义的问题，也没有捕获token验证失败的异常，同时错误信息和你遇到的"jwt must be provided"不匹配。修复后代码：

export const teacher = (req, res, next) => {
  const token = req.header("x-auth-token");
  // 先检查token是否存在
  if (!token) {
    return res.status(401).send({ message: "jwt must be provided" });
  }

  try {
    const decoded = jwt.verify(token, "HeyImaPrivateKeyyy");
    // 验证角色权限
    if (["superAdmin", "admin", "teacher"].includes(decoded.role)) {
      next();
    } else {
      res.status(403).send({ message: "Access denied! Insufficient permissions." });
    }
  } catch (err) {
    res.status(400).send({ message: "Invalid token." });
  }
};

额外排查步骤 #

• 打开浏览器开发者工具的Network标签，查看/students/请求的请求头，确认x-auth-token是否存在且值为正确的JWT字符串；
• 在控制台输入localStorage.getItem("x-auth-token")，检查本地存储的token是否正常；
• 确认你的Axios实例api没有全局拦截器修改或删除请求头。

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