Question

我开发了一个带有 JWT 的系统来对用户进行身份验证，即使身份验证过程工作正常，当我使用邮递员检查后端时，它也会给我预期的结果。但是由于某种原因，当我尝试通过使用 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 文件，并获取预期结果。

Answer 1

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

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

1 个答案: