在来自 Reactjs 的请求 header 中将 jwt 发送到 API

Question

我有一个快速的问题。 I am using Axios to send requests to the nodejs API, when I set the token in the request header the API returns "jwt must be provided". API 期望带有自定义名称的令牌 - 这是我已经走了多远。

登录时发送令牌的 API 代码片段：

const token = jwt.sign(
              {
                userID: result[0].userID,
                firstName: result[0].firstName,
                lastName: result[0].lastName,
                email: result[0].email,
                role: result[0].role,
                // exp: Math.floor(Date.now() / 1000) + 60 * 60,
              },
              "HeyImaPrivateKeyyy"
            );
            res.json({ token });
            console.log("Login Attempt", res.statusMessage, req.body);
          } else {
            res.status(400).send({ message: "Invalid credentials!" });
            console.log("Login Attempt", res.statusMessage, req.body);
          }
        

-- 从这里反应代码 --

成功登录时来自 API 的响应：

{
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySUQiOjEsImZpcnN0TmFtZSI6IkNhbWVyb24iLCJsYXN0TmFtZSI6IkVyYXNtdXMiLCJlbWFpbCI6ImNhbWVyb25AY2xpZnRjb2xsZWdlLmNvbSIsInJvbGUiOiJzdXBlckFkbWluIiwiaWF0IjoxNjYzMzEzNTM2fQ.9R6vXn-5Vb5fj48eUJGPNUGnXMw9TXOjJCox7U36WMI"
}

成功登录时保存令牌（React）

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

    let token = jwt(res.data.token);

    setToken("x-auth-token", token); // your token
    localStorage.setItem("x-auth-token", res.data.token);
    localStorage.setItem("userLogged", true);
    localStorage.setItem("name", token.firstName);
    localStorage.setItem("role", token.role);
    navigate("/auth/dashboard" || from.pathname, { replace: true });
  };

这是尝试调用 API 的 React 组件：

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

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

  const studentCount = 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;

这是 API 应要求提供的：

export const teacher = (req, res, next) => {
  const token = req.header("x-auth-token");
  if (!auth && !token)
    return res.status(401).send({ message: "Access denied." });

  const decoded = jwt.verify(token, "DemoPrivateKey");
  if (auth && ["superAdmin", "admin", "teacher"].includes(decoded.role)) {
    next();
  } else {
    res.status(400).send({ message: "Access denied!" });
  }
};

理想情况下，我想在成功登录时将令牌作为 header 发送，但它在客户端上保存为未定义（不知道如何解决）。

Answer 1

如果您使用的是 Axios，那么根据文档， get方法应该在第二个 position 而不是第三个中具有config参数。 所以也许，只需将api.get("/students/", {}, config)更新为api.get("/students/", config)可以解决您的问题。