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