新標題：計算並更新令牌的剩餘過期時間

Question

我需要在React應用程式中每隔一個小時刷新Spotify令牌（Spotify令牌有效期為1小時）。我知道以下方法使用useEffect鉤子和setInteral

useEffect(() => {
  const interval = setInterval(() => {
    //呼叫API邏輯
  }, 3600);
  return () => clearInterval(interval);
}, [user])

但是當應用程式關閉並重新開啟時，它會再次發出新的請求以獲取令牌（即使舊令牌仍然有效）。因此，我正在嘗試根據剩餘到期時間來實現需要呼叫API以獲取新令牌的功能。如何實現這個功能。

我還創建了一個函數，用於在過去的時間之後計算剩餘到期時間

export const calculateRemainingExpirationTime = expirationTime => {
  const currentTime = new Date().getTime();
  const newExpirationTime = new Date(expirationTime).getTime()
  const remainingTime = newExpirationTime - currentTime
  return remainingTime; //以毫秒為單位
};

因此，當頁面重新載入時，我需要計算剩餘到期時間，然後基於該時間呼叫API，然後每隔1小時呼叫API以取得新代幣。

我需要實作以下功能

1. 當頁面重新載入時，計算剩餘時間並根據剩餘時間呼叫API
2. 每隔1小時呼叫API

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]);