快捷導(dǎo)航

請求時token過期自動刷新token操作

更新時間：2020年09月11日 15:24:44 作者：江湖小浪蝦

這篇文章主要介紹了請求時token過期自動刷新token操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

2.當(dāng)token失效時，現(xiàn)在的網(wǎng)站一般會做兩種處理，一種是跳轉(zhuǎn)到登陸頁面讓用戶重新登陸獲取新的token，另外一種就是當(dāng)檢測到請求失效時，網(wǎng)站自動去請求新的token，第二種方式在app保持登陸狀態(tài)上面用得比較多。

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

//封裝了一個統(tǒng)一的請求函數(shù)，這個不是重點

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

// 封裝了一個檢測返回結(jié)果的函數(shù)，與后臺返回狀態(tài)碼code === 1002表示token失效

let isRefreshing = true;
function checkStatus(response) {
 if (response && response.code === 1002) {
  // 刷新token的函數(shù),這需要添加一個開關(guān)，防止重復(fù)請求
  if(isRefreshing){
    refreshTokenRequst()
  }
  isRefreshing = false;
  // 這個Promise函數(shù)很關(guān)鍵
   const retryOriginalRequest = new Promise((resolve) => {
        addSubscriber(()=> {
          resolve(request(url, options))
        })
      });
      return retryOriginalRequest;
 }else{
   return response;
 }
}

// 刷新token的請求函數(shù)

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函數(shù)集合

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

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

總結(jié)：

其實token失效，自動刷新token，在頁面只有一個請求的時候是比較好處理的，但是如果頁面同時有多個請求，并且都會產(chǎn)生token失效，這就需要一些稍微復(fù)雜的處理，解決方式主要是用了Promise 函數(shù)來進行處理。

每一個token失效的請求都會存到一個Promise函數(shù)集合里面，當(dāng)刷新token的函數(shù)執(zhí)行完畢后，才會批量執(zhí)行這些Promise函數(shù)，返回請求結(jié)果。

還有一點要注意一下，這兒設(shè)置一個刷新token的開關(guān)isRefreshing，這個是非常有必要的，防止重復(fù)請求。

以上這篇請求時token過期自動刷新token操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: