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

1.在開(kāi)發(fā)過(guò)程中，我們都會(huì)接觸到token，token的作用是什么呢？主要的作用就是為了安全，用戶(hù)登陸時(shí)，服務(wù)器會(huì)隨機(jī)生成一個(gè)有時(shí)效性的token,用戶(hù)的每一次請(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è)面讓用戶(hù)重新登陸獲取新的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)求。