React Hooks / 使用 Bearer Token 从 API 获取

Question

我正在构建一个 React 应用程序，它从需要承载令牌授权的 API 获取数据。 因此，对于我请求的令牌和对象，我都有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"));