摘要:當(dāng)失效時(shí),現(xiàn)在的網(wǎng)站一般會(huì)做兩種處理,一種是跳轉(zhuǎn)到登陸頁面讓用戶重新登陸獲取新的,另外一種就是當(dāng)檢測(cè)到請(qǐng)求失效時(shí),網(wǎng)站自動(dòng)去請(qǐng)求新的,第二種方式在保持登陸狀態(tài)上面用得比較多。
1.在開發(fā)過程中,我們都會(huì)接觸到token,token的作用是什么呢?主要的作用就是為了安全,用戶登陸時(shí),服務(wù)器會(huì)隨機(jī)生成一個(gè)有時(shí)效性的token,用戶的每一次請(qǐng)求都需要攜帶上token,證明其請(qǐng)求的合法性,服務(wù)器會(huì)驗(yàn)證token,只有通過驗(yàn)證才會(huì)返回請(qǐng)求結(jié)果。
2.當(dāng)token失效時(shí),現(xiàn)在的網(wǎng)站一般會(huì)做兩種處理,一種是跳轉(zhuǎn)到登陸頁面讓用戶重新登陸獲取新的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)
</>復(fù)制代碼
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失效
</>復(fù)制代碼
let isRefreshing = true;
function checkStatus(response) {
if (response && response.code === 1002) {
// 刷新token的函數(shù),這需要添加一個(gè)開關(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ù)
</>復(fù)制代碼
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ù)集合
</>復(fù)制代碼
let subscribers = [];
function onAccessTokenFetched() {
subscribers.forEach((callback)=>{
callback();
})
subscribers = [];
}
function addSubscriber(callback) {
subscribers.push(callback)
}
總結(jié):其實(shí)token失效,自動(dòng)刷新token,在頁面只有一個(gè)請(qǐng)求的時(shí)候是比較好處理的,但是如果頁面同時(shí)有多個(gè)請(qǐng)求,并且都會(huì)產(chǎn)生token失效,這就需要一些稍微復(fù)雜的處理,解決方式主要是用了Promise 函數(shù)來進(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的開關(guān)isRefreshing,這個(gè)是非常有必要的,防止重復(fù)請(qǐng)求。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/29606.html
摘要:當(dāng)失效時(shí),現(xiàn)在的網(wǎng)站一般會(huì)做兩種處理,一種是跳轉(zhuǎn)到登陸頁面讓用戶重新登陸獲取新的,另外一種就是當(dāng)檢測(cè)到請(qǐng)求失效時(shí),網(wǎng)站自動(dòng)去請(qǐng)求新的,第二種方式在保持登陸狀態(tài)上面用得比較多。 1.在開發(fā)過程中,我們都會(huì)接觸到token,token的作用是什么呢?主要的作用就是為了安全,用戶登陸時(shí),服務(wù)器會(huì)隨機(jī)生成一個(gè)有時(shí)效性的token,用戶的每一次請(qǐng)求都需要攜帶上token,證明其請(qǐng)求的合法性,服務(wù)...
摘要:當(dāng)失效時(shí),現(xiàn)在的網(wǎng)站一般會(huì)做兩種處理,一種是跳轉(zhuǎn)到登陸頁面讓用戶重新登陸獲取新的,另外一種就是當(dāng)檢測(cè)到請(qǐng)求失效時(shí),網(wǎng)站自動(dòng)去請(qǐng)求新的,第二種方式在保持登陸狀態(tài)上面用得比較多。 1.在開發(fā)過程中,我們都會(huì)接觸到token,token的作用是什么呢?主要的作用就是為了安全,用戶登陸時(shí),服務(wù)器會(huì)隨機(jī)生成一個(gè)有時(shí)效性的token,用戶的每一次請(qǐng)求都需要攜帶上token,證明其請(qǐng)求的合法性,服務(wù)...
摘要:實(shí)現(xiàn)目標(biāo)延長(zhǎng)過期時(shí)間活躍用戶在過期時(shí),在用戶無感知的情況下動(dòng)態(tài)刷新,做到一直在線狀態(tài)不活躍用戶在過期時(shí),直接定向到登錄頁登錄返回字段如何簽發(fā),請(qǐng)看上一篇推文,這里不做過多介紹。如果你有更好的做法,歡迎留言告知我,謝謝啦。 前言 記錄一下前后端分離下————token超時(shí)刷新策略! 需求場(chǎng)景 昨天發(fā)了一篇記錄 前后端分離應(yīng)用——用戶信息傳遞 中介紹了token認(rèn)證機(jī)制,跟幾位群友討論了...
閱讀 2605·2023-04-25 15:07
閱讀 711·2021-11-24 10:21
閱讀 2314·2021-09-22 10:02
閱讀 3524·2019-08-30 15:43
閱讀 3233·2019-08-30 13:03
閱讀 2293·2019-08-29 17:18
閱讀 3592·2019-08-29 17:07
閱讀 1880·2019-08-29 12:27