vue項(xiàng)目中响疚，處理用戶過(guò)期的token遇到個(gè)小問(wèn)題鹃共。按照思路，在axios請(qǐng)求攔截器中加上token過(guò)期的判斷，當(dāng)token快過(guò)期時(shí)重新獲取token并將請(qǐng)求中的token替換上衡怀。發(fā)現(xiàn)刷新后的token未能及時(shí)替換到當(dāng)前請(qǐng)求上。
把核心代碼摘出來(lái)捋一捋
let https=axios.create({
headers:{
Authorization:`bearerAuthorization`
}
})
https.interceptors.request.use(config => {
if(判斷token是否過(guò)期){
let promisefresh = new Promise(function(resolve, reject) {
//刷新token
axios.post(url, data).then(response => {
config.headers.Authorization = `Bearer ${response.data.access_token}`;
resolve(config);
})
});
return promisefresh;
}else{
return config;
}
}, function (error) {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
});
獲取到新的token后要替換上路翻，要注意axios 默認(rèn)值的先后順序
//創(chuàng)建實(shí)例時(shí)的headers設(shè)置的值覆蓋庫(kù)的默認(rèn)值
let https=axios.create({
headers:{
Authorization:`bearerAuthorization`
}
})
//實(shí)例的 defaults 屬性覆蓋創(chuàng)建實(shí)例時(shí)的屬性
//最后是請(qǐng)求的 config 參數(shù)覆蓋實(shí)例的 defaults 屬性
config.headers.Authorization = `Bearer ${response.data.access_token}`;
http.interceptors.request.use請(qǐng)求攔截器執(zhí)行的時(shí)請(qǐng)求之前的操作狈癞，請(qǐng)求攔截器中處理完之后要記得返回config。config包含了請(qǐng)求的信息茂契，請(qǐng)求頭蝶桶，請(qǐng)求方式等等。
這里要用Promise 處理異步問(wèn)題掉冶。如果判斷完token過(guò)期直接調(diào)用刷新接口獲取token真竖，在新token還沒(méi)有進(jìn)行本地替換前脐雪，請(qǐng)求的config已經(jīng)被返回，請(qǐng)求過(guò)期的token未被替換恢共，要下一次請(qǐng)求才能替換上新的token战秋。
關(guān)于promise的介紹，RandyZhang寫的一篇簡(jiǎn)書介紹的很清楚讨韭，大家可以看看脂信。
http://www.reibang.com/p/115b4c79a75d
簡(jiǎn)單說(shuō)下怎么判斷token是否過(guò)期
登錄的時(shí)候后端返回一個(gè)token過(guò)期時(shí)間（秒），轉(zhuǎn)換成時(shí)間戳保存下來(lái)透硝。在攔截器中獲取當(dāng)前的時(shí)間狰闪，進(jìn)行對(duì)比。
//獲取系統(tǒng)的當(dāng)前時(shí)間
new Date().getTime()
//保存的過(guò)期時(shí)間濒生，系統(tǒng)當(dāng)前的時(shí)間加上過(guò)期的秒數(shù)
new Date().getTime() + response.data.expires_in * 1000
