Nouveau titre : Calculer et mettre à jour le délai d'expiration restant d'un token

Question

Je dois actualiser le jeton Spotify toutes les heures dans l'application React (le jeton Spotify est valable 1 heure). Je sais que la méthode suivante utilise le crochet useEffect

useEffect(() => {
  const intervalle = setInterval(() => {
    //Appeler la logique de l'API
  }, 3600);
  return () => clearInterval(intervalle);
}, [utilisateur])

Mais lorsque l'application est fermée et rouverte, elle fait à nouveau une nouvelle demande pour obtenir le jeton (même si l'ancien jeton est toujours valide). J'essaie donc d'implémenter une fonctionnalité qui nécessite d'appeler une API pour obtenir un nouveau jeton en fonction du délai d'expiration restant. Comment implémenter cette fonction.

J'ai également créé une fonction qui calcule le délai d'expiration restant après le temps écoulé

export const calculateRemainingExpirationTime = expirationTime =>
  const currentTime = new Date().getTime();
  const newExpirationTime = new Date(expirationTime).getTime()
  const restantTime = newExpirationTime - currentTime
  renvoie le temps restant //en millisecondes
};
Ainsi, lorsque la page se recharge, je dois calculer le délai d'expiration restant, puis appeler l'API en fonction de ce délai, puis appeler l'API toutes les heures pour obtenir un nouveau jeton. 
Je dois implémenter les fonctions suivantes

Lorsque la page se recharge, calculez le temps restant et appelez l'API en fonction du temps restant
Appel de l'API toutes les heures

            

Answer 1

Vous devez économiser 过期时间持久化到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]);