Vue如何優(yōu)雅處理Token過(guò)期并自動(dòng)續(xù)期
大家好,干了6年前端,和Token斗智斗勇了不知道多少回。最煩的就是用戶正填著表單呢,突然跳登錄頁(yè)——Token過(guò)期了!今天就跟大家聊聊如何優(yōu)雅處理Token過(guò)期,甚至讓它自動(dòng)續(xù)期,讓用戶無(wú)感知!
一、Token過(guò)期,用戶的噩夢(mèng)
想象一下:
- 用戶填了半小時(shí)的報(bào)銷(xiāo)單,點(diǎn)擊提交—— “登錄失效,請(qǐng)重新登錄”
- 購(gòu)物車(chē)選了半天,結(jié)算時(shí)——跳轉(zhuǎn)登錄頁(yè)
血壓直接拉滿,用戶體驗(yàn)直接崩盤(pán)!
常見(jiàn)處理方式(但不夠優(yōu)雅)
- 粗暴型:Token過(guò)期直接跳登錄頁(yè)(用戶罵娘)
- 提醒型:彈窗提示“登錄已過(guò)期”(用戶還是得手動(dòng)操作)
- 輪詢檢查型:定時(shí)檢查T(mén)oken是否快過(guò)期(浪費(fèi)請(qǐng)求)
但今天我要講的是更高級(jí)的玩法——無(wú)感知自動(dòng)續(xù)期!
二、Token自動(dòng)續(xù)期方案
1. 方案核心思路
- 短期Token(Access Token) :用來(lái)做日常請(qǐng)求(比如2小時(shí)過(guò)期)
- 長(zhǎng)期Token(Refresh Token) :用來(lái)?yè)Q新Token(比如7天過(guò)期)
流程:
- 用戶登錄,拿到
access_token和refresh_token access_token過(guò)期后,用refresh_token去換新的- 如果
refresh_token也過(guò)期了,才讓用戶重新登錄
2. 前端如何實(shí)現(xiàn)
(1)Axios 攔截器處理過(guò)期
// 請(qǐng)求攔截
axios.interceptors.request.use(config => {
const accessToken = localStorage.getItem('access_token')
if (accessToken) {
config.headers.Authorization = `Bearer ${accessToken}`
}
return config
})
// 響應(yīng)攔截
axios.interceptors.response.use(
response => response,
async error => {
const originalRequest = error.config
// 如果是401(Token過(guò)期)且未重試過(guò)
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true
try {
// 用 refresh_token 換新的 access_token
const res = await axios.post('/refresh-token', {
refresh_token: localStorage.getItem('refresh_token')
})
const { access_token, refresh_token } = res.data
localStorage.setItem('access_token', access_token)
localStorage.setItem('refresh_token', refresh_token)
// 重新發(fā)之前的請(qǐng)求
originalRequest.headers.Authorization = `Bearer ${access_token}`
return axios(originalRequest)
} catch (refreshError) {
// refresh_token 也過(guò)期了,跳登錄頁(yè)
window.location.href = '/login'
}
}
return Promise.reject(error)
}
)
(2)提前續(xù)期(更絲滑)
如果等Token完全過(guò)期再換新,用戶可能會(huì)遇到卡頓。更優(yōu)解是在Token快過(guò)期時(shí)提前續(xù)期:
// 檢查T(mén)oken剩余時(shí)間
function checkTokenExpiry() {
const token = localStorage.getItem('access_token')
if (!token) return false
const payload = JSON.parse(atob(token.split('.')[1])) // 解析JWT
const expiresIn = payload.exp * 1000 - Date.now()
// 如果還剩5分鐘過(guò)期,就續(xù)期
if (expiresIn < 5 * 60 * 1000) {
refreshToken()
}
}
// 定時(shí)檢查(每10分鐘一次)
setInterval(checkTokenExpiry, 10 * 60 * 1000)
三、安全注意事項(xiàng)
Refresh Token 必須HttpOnly + Secure(防止XSS盜取)
短期Token有效期別太長(zhǎng)(建議2小時(shí)以內(nèi))
單點(diǎn)登錄(SSO)場(chǎng)景要額外處理
四、實(shí)際項(xiàng)目踩坑記錄
去年我做的一個(gè)后臺(tái)系統(tǒng),Token過(guò)期問(wèn)題特別嚴(yán)重,用戶經(jīng)常填表到一半被踢出。
優(yōu)化前:Token 2小時(shí)過(guò)期,直接跳登錄頁(yè),用戶投訴爆炸
優(yōu)化后:
- Access Token 2小時(shí)過(guò)期
- Refresh Token 7天過(guò)期
- 提前5分鐘自動(dòng)續(xù)期
- 最終用戶幾乎感知不到Token刷新,體驗(yàn)大幅提升!
五、知識(shí)延展
前端怎么無(wú)感刷新token
當(dāng) Token 過(guò)期時(shí),前端可以使用以下兩種無(wú)感刷新 Token 的方案:
1. 使用刷新Token(Refresh Token)
在登錄成功后,后端會(huì)返回兩個(gè)Token,一個(gè)是Access Token,一個(gè)是Refresh Token。前端需要將這兩個(gè)Token保存到本地存儲(chǔ)中,例如localStorage或sessionStorage中,以便在需要時(shí)使用。
當(dāng)需要訪問(wèn)API時(shí),前端將從本地存儲(chǔ)中獲取Access Token,并將其放入請(qǐng)求頭中發(fā)送到后端。如果Access Token過(guò)期了,后端會(huì)返回一個(gè)錯(cuò)誤響應(yīng),并提示前端進(jìn)行刷新Token的操作。
前端可以使用下面的代碼實(shí)現(xiàn)刷新Token的操作:
function refreshToken() {
const refreshToken = localStorage.getItem('refreshToken');
// 發(fā)送請(qǐng)求到后端,獲取新的Access Token
fetch('/api/refreshToken', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ refreshToken })
})
.then(response => response.json())
.then(data => {
// 將新的Access Token更新到本地存儲(chǔ)中
localStorage.setItem('accessToken', data.accessToken);
})
.catch(error => {
console.error('刷新Token失?。?, error);
});
}
當(dāng)需要刷新Token時(shí),前端可以調(diào)用refreshToken函數(shù),該函數(shù)會(huì)向后端發(fā)送請(qǐng)求,獲取新的Access Token,并將其更新到本地存儲(chǔ)中。在使用API時(shí),前端需要檢查Access Token是否過(guò)期,如果過(guò)期了,則需要調(diào)用refreshToken函數(shù)來(lái)獲取新的Access Token。
2. 使用續(xù)期接口
在登錄成功后,后端會(huì)返回一個(gè)Access Token和一個(gè)過(guò)期時(shí)間。前端可以將Access Token和過(guò)期時(shí)間保存到本地存儲(chǔ)中,以便在需要時(shí)使用。
前端需要定時(shí)檢查Access Token是否過(guò)期,如果過(guò)期了,則需要向后端發(fā)送續(xù)期請(qǐng)求來(lái)更新Access Token的過(guò)期時(shí)間。下面是一個(gè)示例代碼:
function renewToken() {
const accessToken = localStorage.getItem('accessToken');
const expireTime = localStorage.getItem('expireTime');
// 計(jì)算AccessToken的剩余有效時(shí)間
const remainTime = expireTime - Date.now();
// 如果AccessToken的剩余有效時(shí)間小于5分鐘,則發(fā)送續(xù)期請(qǐng)求
if (remainTime < 5 * 60 * 1000) {
// 發(fā)送續(xù)期請(qǐng)求到后端,更新AccessToken的過(guò)期時(shí)間
fetch('/api/renewToken', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ accessToken })
})
.then(response => response.json())
.then(data => {
// 將新的過(guò)期時(shí)間更新到本地存儲(chǔ)中
localStorage.setItem('expireTime', data.expireTime);
})
.catch(error => {
console.error('續(xù)期Token失?。?, error);
});
}
}
// 定時(shí)檢查AccessToken的過(guò)期時(shí)間
setInterval(renewToken, 60 * 1000);
上面的代碼中,renewToken函數(shù)會(huì)檢查Access Token的過(guò)期時(shí)間,如果剩余有效時(shí)間小于5分鐘,則會(huì)向后端發(fā)送續(xù)期請(qǐng)求來(lái)更新AccessToken的過(guò)期時(shí)間。在使用API時(shí),前端需要定時(shí)調(diào)用renewToken函數(shù)來(lái)檢查Access Token的過(guò)期時(shí)間,并更新過(guò)期時(shí)間。
六、總結(jié)
Token過(guò)期處理得好,用戶體驗(yàn)直接起飛!核心思路:
- 短期Token + 長(zhǎng)期Refresh Token
- Axios攔截器自動(dòng)換新Token
- 提前續(xù)期避免卡頓
- 安全存儲(chǔ)Refresh Token
如果你的項(xiàng)目還在用“Token過(guò)期就跳登錄”的粗暴方案,趕緊優(yōu)化吧!
?到此這篇關(guān)于Vue如何優(yōu)雅處理Token過(guò)期并自動(dòng)續(xù)期的文章就介紹到這了,更多相關(guān)Vue處理Token過(guò)期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- SpringBoot基于Redis實(shí)現(xiàn)token的在線續(xù)期的實(shí)踐
- springboot+vue實(shí)現(xiàn)Token自動(dòng)續(xù)期(雙Token方案)
- SpringBoot中Token登錄授權(quán)、續(xù)期和主動(dòng)終止的方案流程分析
- SpringBoot中基于JWT的單token授權(quán)和續(xù)期方案步驟詳解
- SpringBoot實(shí)現(xiàn)JWT token自動(dòng)續(xù)期的示例代碼
- Spring?Boot實(shí)現(xiàn)JWT?token自動(dòng)續(xù)期的實(shí)現(xiàn)
- JAVA實(shí)現(xiàn)Token自動(dòng)續(xù)期機(jī)制的示例代碼
相關(guān)文章
vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程
這篇文章主要為大家介紹了vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
vue 路由視圖 router-view嵌套跳轉(zhuǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉(zhuǎn),主要實(shí)現(xiàn)的內(nèi)容有制作一個(gè)登錄頁(yè)面,跳轉(zhuǎn)到首頁(yè),首頁(yè)包含菜單欄、頂部導(dǎo)航欄、主體,標(biāo)準(zhǔn)的后臺(tái)網(wǎng)頁(yè)格式,菜單點(diǎn)擊顯示不同的頁(yè)面,感興趣的小伙伴請(qǐng)參考下面文章內(nèi)容2021-09-09
Vant彈出列表多選輸入框下拉選擇代碼(可直接復(fù)制使用)
vue項(xiàng)目無(wú)論是用element中的Select選擇器,還是使用公司維護(hù)的組件,都可以輕松實(shí)現(xiàn)單選和多選的需求,這篇文章主要給大家介紹了關(guān)于Vant彈出列表多選輸入框下拉選擇的相關(guān)資料,需要的朋友可以參考下2024-01-01
vue-cli之引入Bootstrap問(wèn)題(遇到的坑,以及解決辦法)
這篇文章主要介紹了vue-cli之引入Bootstrap問(wèn)題(遇到的坑,以及解決辦法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue3中關(guān)于i18n字符串轉(zhuǎn)義問(wèn)題
這篇文章主要介紹了vue3中關(guān)于i18n字符串轉(zhuǎn)義問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
vue打包后dist文件在本地啟動(dòng)運(yùn)行的步驟
這篇文章主要給大家介紹了關(guān)于vue打包后dist文件在本地啟動(dòng)運(yùn)行的簡(jiǎn)單步驟,文中通過(guò)代碼示例以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考價(jià)值,需要的朋友可以參考下2023-09-09

