1.在開發過程中，我們都會接觸到token，token的作用是什麼呢？主要的作用就是為了安全，使用者登陸時，伺服器會隨機生成一個有時效性的token,使用者的每一次請求都需要攜帶上token，證明其請求的合法性，伺服器會驗證token，只有通過驗證才會返回請求結果。

2.當token失效時，現在的網站一般會做兩種處理，一種是跳轉到登陸頁面讓使用者重新登陸獲取新的token，另外一種就是當檢測到請求失效時，網站自動去請求新的token，第二種方式在app保持登陸狀態上面用得比較多。

3.下面進入主題，我們請求用的是axios，不管用何種請求方式，重新整理token的原理都是一樣的。

//封裝了一個統一的請求函式，這個不是重點

export default function request(url,options) {
  const token = localStorage.getItem('token');
  const defaultOptions = {
    headers: {
      Authorization: `Bearer ${token}`,},withCredentials: true,url: url,baseURL: BASE_URL,};
  const newOptions = { ...options,...defaultOptions };
  return axios.request(newOptions)
    .then(checkStatus)
    .catch(error => console.log(error));
}

// 封裝了一個檢測返回結果的函式，與後臺返回狀態碼code === 1002表示token失效

let isRefreshing = true;
function checkStatus(response) {
 if (response && response.code === 1002) {
  // 重新整理token的函式,這需要新增一個開關，防止重複請求
  if(isRefreshing){
    refreshTokenRequst()
  }
  isRefreshing = false;
  // 這個Promise函式很關鍵
   const retryOriginalRequest = new Promise((resolve) => {
        addSubscriber(()=> {
          resolve(request(url,options))
        })
      });
      return retryOriginalRequest;
 }else{
   return response;
 }
}

// 重新整理token的請求函式

function refreshTokenRequst(){
  let data;
  const refreshToken = localStorage.getItem('refreshToken');
  data:{
    authorization: 'YXBwYXBpczpaSWxhQUVJdsferTeweERmR1praHk=',refreshToken,}
  axios.request({
    baseURL: BASE_URL,url:'/app/renewal',method: 'POST',data,}).then((response)=>{
    localStorage.setItem('refreshToken',response.data.refreshToken);
    localStorage.setItem('token',response.data.token);
    onAccessTokenFetched();
    isRefreshing = true;
  });
}

// Promise函式集合

let subscribers = [];
function onAccessTokenFetched() {
  subscribers.forEach((callback)=>{
    callback();
  })
  subscribers = [];
}

function addSubscriber(callback) {
  subscribers.push(callback)
}

總結：

其實token失效，自動重新整理token，在頁面只有一個請求的時候是比較好處理的，但是如果頁面同時有多個請求，並且都會產生token失效，這就需要一些稍微複雜的處理，解決方式主要是用了Promise 函式來進行處理。

每一個token失效的請求都會存到一個Promise函式集合裡面，當重新整理token的函式執行完畢後，才會批量執行這些Promise函式，返回請求結果。

還有一點要注意一下，這兒設定一個重新整理token的開關isRefreshing，這個是非常有必要的，防止重複請求。

以上這篇請求時token過期自動重新整理token操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。