快捷導(dǎo)航

請(qǐng)求時(shí)token過(guò)期自動(dòng)刷新token操作

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

這篇文章主要介紹了請(qǐng)求時(shí)token過(guò)期自動(dòng)刷新token操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

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

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

//封裝了一個(gè)統(tǒng)一的請(qǐng)求函數(shù)，這個(gè)不是重點(diǎn)

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

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

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

// 刷新token的請(qǐng)求函數(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é)：

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

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

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

以上這篇請(qǐng)求時(shí)token過(guò)期自動(dòng)刷新token操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: