let refreshTokenTimeout;

const setRefreshTokenTimer = (expiresIn) => {
  // 設(shè)置定時器，在 token 過期前 5 分鐘刷新
  const refreshTime = expiresIn - 300000; // 5分鐘
  refreshTokenTimeout = setTimeout(refreshToken, refreshTime);
}

const refreshToken = async () => {
  try {
    const response = await fetch('/refresh-token');
    const data = await response.json();
    // 假設(shè)返回數(shù)據(jù)包含新的 access token 和它的過期時間（expiresIn）
    localStorage.setItem('refreshToken', data.refreshToken);
    setRefreshTokenTimer(data.expiresIn);
  } catch (error) {
    console.error("Failed to refresh token", error);
    // 可以根據(jù)需要處理錯誤，例如跳轉(zhuǎn)到登錄頁面
  }
}

// 初次設(shè)置定時器，這種需要后臺返回token的過期時間，或者用戶登錄的時候獲取token的時候同時存儲當(dāng)前的時間于localStorage
setRefreshTokenTimer(initialExpiresIn);

// 使用 Axios 作為示例請求庫
import axios from 'axios';

const http= axios.create({
  baseURL: '/api',
  timeout: 10000,
});

http.interceptors.request.use(async (config) => {
  const token = localStorage.getItem('refreshToken');
  const expiryTime = localStorage.getItem('tokenExpiryTime');

  if (expiryTime && Date.now() >= expiryTime - 300000) { // 提前5分鐘刷新
    const newTokenData = await refreshToken();
    config.headers['Authorization'] = `Bearer ${newTokenData.refreshToken}`;
  } else {
    config.headers['Authorization'] = `Bearer ${token}`;
  }

  return config;
}, (error) => {
  return Promise.reject(error);
});

const refreshToken = async () => {
  try {
    const response = await apiClient.post('/refresh-token');
    const data = await response.data;
    localStorage.setItem('refreshToken', data.refreshToken);
    localStorage.setItem('tokenExpiryTime', Date.now() + data.expiresIn);
    return data;
  } catch (error) {
    console.error("Failed to refresh token", error);
    throw error;
  }
};

// 在需要時使用 apiClient 發(fā)出請求
http.get('/some-protected-endpoint').then(response => {
  console.log(response.data);
});

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
const http: AxiosInstance = axios.create({
  baseURL: '/baseapi', //Mock
  timeout: 10000,
});
const openTokenRefresh = false; // 是否開啟token刷新,如果開啟，就設(shè)置為true就好
const pendingRequests: ((token: string) => void)[] = []; // 保存所有請求的回調(diào)，用于刷新token后重新請求
const onTokenRefreshed = (token: string):void => {
  // 刷新token后，重新請求,
  pendingRequests.forEach((callback) => {
    callback(token);
  });
  pendingRequests.length = 0;
};
const addPendingRequest = (callback: (token: string) => void) => {
  pendingRequests.push(callback);
};
//是否正在刷新token
let isRefreshing = false;

http.interceptors.response.use((response: AxiosResponse<any>) => response, async (error) => {
  if (error.response && error.response.status === 401 && openTokenRefresh) {
  	//獲取refreshToken 
 	const refreshToken = localStorage.getItem('refreshToken');
    if (!refreshToken) {
        //沒有refreshToken，跳轉(zhuǎn)登錄頁面
      window.location.href('/login')
      return Promise.reject('登錄失效，請重新登錄');
    }
    if (!isRefreshing) {
      try{
         isRefreshing = true;
         //請求更新token
      	 const data= await updataToken(refreshToken);
       	 localStorage.setItem('token', data.token);
       	 localStorage.setItem('refreshToken', data.refreshToken);
       	 onTokenRefreshed(data.token);
       }catch(err){
       	  window.location.href('/login')
       	  return Promise.reject(err)
       }
       finally{
      	  isRefreshing = false
       }
    }
	      //存儲當(dāng)前請求
      return new Promise<AxiosResponse<any>>((resolve) => {
        addPendingRequest((newToken: string) => {
          response.config.headers['Authorization'] ='Bearer'+ newToken;
          resolve(http(response.config));
        });
      });
  }

  return Promise.reject(error);
});