使用授权标头获取请求在 React 中不起作用答案

【问题标题】：Get request with Authorization Header does not working in React使用授权标头获取请求在 React 中不起作用
【发布时间】：2021-07-20 04:52:44
【问题描述】：

我已经开发了一个使用 JWT 对用户进行身份验证的系统，即使是身份验证过程也可以正常工作，当我使用 postman 检查后端时，它会给我预期的结果。但是由于某种原因，当我尝试使用 AXIOS 从我的前端使用相同的 API 调用时，它不起作用。在进入这个特定的前端组件之前，我已经将 JWT 保存到浏览器中的 LocalStorage 中，所以在这个组件中，我使用 useEffect 反应钩子来调用后端 API 并尝试获取相关数据。我会把前端代码放在下面。

import React, { useEffect, useState } from "react";
import axios from "axios";

const ResearcherProfileScreen = (props) => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    let currentToken = localStorage.getItem("authToken");
    alert(currentToken);
    const fetchUserData = async () => {
      try {
        const config = {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${currentToken}`,
          },
        };
        await axios
          .get("http://localhost:5000/api/auth/researcher/profile", config)
          .then((res) => {
            setUserData(res.data.researcher);
            alert("Data Fetch Completed!" + userData.username + " Welcome");
          })
          .catch((error) => {
            localStorage.removeItem("authToken");
            props.history.push("/login");
            alert("You are not authorized please login");
          });
      } catch (err) {
        alert(err);
      }
    };
    fetchUserData();
  }, [props.history]);

  const logOutHandler = () => {
    localStorage.removeItem("authToken");
    alert("TOKEN REMOVED:" + localStorage.getItem("authToken"));
  };

  return (
    <div>
      Researcher Profile
      {userData && <button onClick={logOutHandler}>Log Out</button>}
    </div>
  );
};

export default ResearcherProfileScreen;

当我运行它时，它跳过 then() 部分并执行 catch() 部分，如果有人能解释为什么它会跳过 then() 部分，那就太好了。

***注意 - 确切的 API 调用完全适用于 PostMan 文件并获取预期结果。

【问题讨论】：

能否提供您浏览器网络调用的截图？我想看看实际的问题
我已经找到了错误的根源，似乎在获取数据之后，直到数据加载到 setState 之前还有一点时间间隔。由于需要一些时间，“then”块没有正确执行，因为我编写了一些警报弹出命令来检查数据是否已加载。 .then((res) => { setUserData(res.data.researcher); alert("数据获取完成！" + userData.username + " Welcome"); })
感谢您的帮助。我真的很感激:-)

标签： javascript reactjs axios jwt mern

【解决方案1】：

获取数据后，如果 HTTP 请求没有错误，then 块将被执行。在 then 块中，我使用 setState hook (setUserData) 来存储获取的数据，并且紧随该行之后，还有另一个命令使用之前获取的数据来显示警报消息。但实际上使用 setState 方法存储数据需要一些时间，所以警告消息找不到所需的数据并引发错误并因此执行跳到 catch 块中。

【讨论】：