Neuer Titel: Berechnen und aktualisieren Sie die verbleibende Ablaufzeit eines Tokens

Question

Ich muss das Spotify-Token jede Stunde in der React-Anwendung aktualisieren (Spotify-Token ist 1 Stunde lang gültig). Ich weiß, dass die folgende Methode den Hook useEffect und den Hook setInteral

verwendet.

useEffect(() => {
  const Interval = setInterval(() => {
    //API-Logik aufrufen
  }, 3600);
  return () => clearInterval(interval);
}, [Benutzer])

Aber wenn die App geschlossen und erneut geöffnet wird, stellt sie erneut eine neue Anfrage zum Abrufen des Tokens (obwohl das alte Token noch gültig ist). Ich versuche also, eine Funktionalität zu implementieren, die einen API-Aufruf erfordert, um basierend auf der verbleibenden Ablaufzeit ein neues Token zu erhalten. So implementieren Sie diese Funktion.

Ich habe außerdem eine Funktion erstellt, die die verbleibende Ablaufzeit nach der verstrichenen Zeit berechnet

export const berechneRemainingExpirationTime = expirationTime =>
  const currentTime = new Date().getTime();
  const newExpirationTime = neues Datum(expirationTime).getTime()
  const previousTime = newExpirationTime – currentTime
  return previousTime; //in Millisekunden
};

Wenn die Seite also neu geladen wird, muss ich die verbleibende Ablaufzeit berechnen und dann die API basierend auf dieser Zeit aufrufen und dann die API alle 1 Stunde aufrufen, um ein neues Token zu erhalten.

Ich muss die folgenden Funktionen implementieren

1. Wenn die Seite neu geladen wird, berechnen Sie die verbleibende Zeit und rufen Sie die API basierend auf der verbleibenden Zeit auf
2. API stündlich aufrufen

Answer 1

你需要将过期时间持久化到localStorage或使用Redux-persist来保存

//此间隔仅在用户未关闭应用程序时执行
useEffect(() => {
  const interval = setInterval(() => {
    //调用api逻辑
    //将过期时间写入本地存储
     localStorage.setItem("expir",value)
  }, 3600);
  return () => clearInterval(interval); 
}, [user])

//获取在本地存储中写入/存储的过期时间

 React.useEffect(() => {
    let mounted = true;
    const getToken = () => {
      if (mounted) {
        const expirationtime = localStorage.getItem("expir");
        if (new Date() > new Date(Number(expirationtime))) {
          // 过期，获取新的令牌
        } else {
          // 存在的令牌
        }
      }
    };
    getToken();
    return () => {
      mounted = false;
    };
  }, [user]);