React Hooks / 使用 Bearer Token 从 API 获取

Question

我正在构建一个 React 应用程序，它从 API 中获取数据，其中需要 Bearer Token 授权。因此，对于我请求的令牌和对象，我都有 useState()，另外还有 2 个布尔值 useState()，无论它们是否具有设置值。当我在我的代码中更改某些内容并刷新页面时，它在控制台中全部工作，但只有在那时。

当我第二次刷新时，验证和获取对象都不再起作用。

我怀疑是因为 useEffect()-Hook 行为或异步抓取，但我想不出一个可行的方法

let batch_id = "XXX";

function App() {


const [objectOutput, setObjectOutput] = useState([]);
const [objectIsLoaded, setObjectIsLoaded] = useState([]);
const [authKey, setAuthKey] = useState([]);
const [authKeyIsSet, setAuthKeyIsSet] = useState(false);

  useEffect(() => {

    const authorize = async () => {
      var myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/json");

      var raw = JSON.stringify({
        username: "username",
        password: "password",
      });

      var requestOptions = {
        method: "POST",
        headers: myHeaders,
        body: raw,
        redirect: "follow"
      };

      const res = await fetch(api_url + "/auth", requestOptions).catch((error) => {
        console.log(error)
      });
      const data = await res.json();
      setAuthKey(data.token);
      setAuthKeyIsSet(true);
      console.log("Successful Authorization. Token: " + authKey);


  
    };

    authorize();

  }, [objectOutput]);



  useEffect(() => {
  const getObject = async () => {
    var myHeaders = new Headers();
    myHeaders.append("Authorization", "Bearer " + authKey);

    console.log("Token in getObj:" + authKey);

    var requestOptions = {
      method: "GET",
      headers: myHeaders,
      redirect: "follow"
    };

    const res = await fetch(api_url + "/get?function=readObject&args=" + batch_id, requestOptions).catch((error) => {
      console.log(error)
    });
    const data = await res.json();

    setObjectOutput(data);
    setObjectIsLoaded(true);
    
    //Debugging Stuff
    console.log("###### ANALYSE in getObject() ########");      
    console.log("Key: " + authKey)
    console.log("KeyIsSet: " + authKeyIsSet)
    console.log("ObjectIsLoaded:" + objectIsLoaded)
    console.log(objectOutput); 
    console.log("###### ANALYSE in getObject() ########"); 
    
  };

  if(authKeyIsSet){
    getObject();
  }

}, [authKey]); 


  

  if(objectOutput === '' || objectOutput === undefined || typeof objectOutput === 'undefined' || !objectIsLoaded || !authKeyIsSet){
    return (<div>Loading</div>)
  }
    return (
      <div className="App">

        <Header
          title="Lorem Ipsum "
          description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
        />
        <Flagsection hasFlag={objectOutput.alarmFlag} />
        <Cardsection sort={objectOutput.attributes[5].value} treatment={objectOutput.attributes[11].value + " und " + objectOutput.attributes[12].value } plantheight={""} harvesttime={objectOutput.attributes[10].value} />
        <MapChart/>
        <Footer />
      </div>
    );

}

export default App;

Answer 1

就像 Borni.Mr 在他们的评论中所说的那样，use/setState 不是持久的，因此将令牌存储在 localStorage 中是使其保留的一种方式然后你只需在需要或更改时获取或设置令牌

这可以通过 localStorage.setItem("token", JSON.stringify(token)); 来完成并得到它 const token = JSON.parse(localStorage.getItem("token"));

React Hooks / 使用 Bearer Token 从 API 获取

React Hooks / Fetching from API with Bearer Token

javascript

reactjs

react-hooks

use-effect

use-state