Tajuk baharu: Kira dan kemas kini baki masa tamat tempoh token

Question

Saya perlu memuat semula token Spotify setiap jam dalam aplikasi React (Token Spotify sah selama 1 jam). Saya tahu kaedah berikut menggunakan useEffect dan setInteral

useEffect(() ==> {
  selang const = setInterval(() => {
    //Panggil logik API
  }, 3600);
  return () => clearInterval(selang);
}, [pengguna])

Tetapi apabila apl ditutup dan dibuka semula, ia membuat permintaan baharu sekali lagi untuk mendapatkan token (walaupun token lama masih sah). Jadi saya cuba melaksanakan fungsi yang memerlukan panggilan API untuk mendapatkan token baharu berdasarkan baki masa tamat tempoh. Bagaimana untuk melaksanakan fungsi ini.

Saya juga mencipta fungsi yang mengira baki masa tamat tempoh selepas masa berlalu

export const calculateRemainingExpirationTime = expirationTime =>
  const currentTime = new Date().getTime();
  const newExpirationTime = new Date(expirationTime).getTime()
  const remainingTime = newExpirationTime - currentTime
  kembali bakiMasa; //dalam milisaat
};

Jadi apabila halaman dimuat semula, saya perlu mengira baki masa tamat tempoh dan kemudian memanggil API berdasarkan masa itu dan kemudian memanggil API setiap 1 jam untuk mendapatkan token baharu.

Saya perlu melaksanakan fungsi berikut

1. Apabila halaman dimuat semula, kira baki masa dan panggil API berdasarkan masa yang tinggal
2. Memanggil API setiap jam

Answer 1

Anda perlu berjimat 过期时间持久化到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]);