如何實現(xiàn)無感刷新token
前言:
最近在做需求的時候,涉及到登錄token
,產(chǎn)品提出一個問題:能不能讓token
過期時間長一點,我頻繁的要去登錄。
前端:后端,你能不能把token 過期時間設(shè)置的長一點。
后端:可以,但是那樣做不安全,你可以用更好的方法。
前端:什么方法?
后端:給你刷新token的接口,定時去刷新token
前端:好,讓我思考一下
1、需求
當token
過期的時候,刷新token
,前端需要做到無感刷新token
,即刷token
時要做到用戶無感知,避免頻繁登錄。實現(xiàn)思路
方法一
后端返回過期時間,前端判斷token
過期時間,去調(diào)用刷新to
ken接口
缺點:需要后端額外提供一個token
過期時間的字段;使用了本地時間判斷,若本地時間被篡改,特別是本地時間比服務(wù)器時間慢時,攔截會失敗。
方法二
寫個定時器,定時刷新token
接口
缺點:浪費資源,消耗性能,不建議采用。
方法三
在響應(yīng)攔截器中攔截,判斷token
返回過期后,調(diào)用刷新token接口
2、實現(xiàn)
axios
的基本骨架,利用service.interceptors.response
進行攔截
import axios from 'axios' service.interceptors.response.use( response => { if (response.data.code === 409) { return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => { const { token } = res.data setToken(token) response.headers.Authorization = `${token}` }).catch(err => { removeToken() router.push('/login') return Promise.reject(err) }) } return response && response.data }, (error) => { Message.error(error.response.data.msg) return Promise.reject(error) })
3、問題解決
問題一:如何防止多次刷新token
我們通過一個變量isRefreshing
去控制是否在刷新token
的狀態(tài)。
import axios from 'axios' service.interceptors.response.use( response => { if (response.data.code === 409) { if (!isRefreshing) { isRefreshing = true return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => { const { token } = res.data setToken(token) response.headers.Authorization = `${token}` }).catch(err => { removeToken() router.push('/login') return Promise.reject(err) }).finally(() => { isRefreshing = false }) } } return response && response.data }, (error) => { Message.error(error.response.data.msg) return Promise.reject(error) })
問題二:同時發(fā)起兩個或者兩個以上的請求時,其他接口怎么解決
當?shù)诙€過期的請求進來,token
正在刷新,我們先將這個請求存到一個數(shù)組隊列中,想辦法讓這個請求處于等待中,一直等到刷新token
后再逐個重試清空請求隊列。那么如何做到讓這個請求處于等待中呢?為了解決這個問題,我們得借助Promise
。將請求存進隊列中后,同時返回一個Promise
,讓這個Promise
一直處于Pending
狀態(tài)(即不調(diào)用resolve),此時這個請求就會一直等啊等,只要我們不執(zhí)行resolve
,這個請求就會一直在等待。當刷新請求的接口返回來后,我們再調(diào)用resolve,逐個重試。
最終代碼:
import axios from 'axios' // 是否正在刷新的標記 let isRefreshing = false //重試隊列 let requests = [] service.interceptors.response.use( response => { //約定code 409 token 過期 if (response.data.code === 409) { if (!isRefreshing) { isRefreshing = true //調(diào)用刷新token的接口 return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => { const { token } = res.data // 替換token setToken(token) response.headers.Authorization = `${token}` // token 刷新后將數(shù)組的方法重新執(zhí)行 requests.forEach((cb) => cb(token)) requests = [] // 重新請求完清空 return service(response.config) }).catch(err => { //跳到登錄頁 removeToken() router.push('/login') return Promise.reject(err) }).finally(() => { isRefreshing = false }) } else { // 返回未執(zhí)行 resolve 的 Promise return new Promise(resolve => { // 用函數(shù)形式將 resolve 存入,等待刷新后再執(zhí)行 requests.push(token => { response.headers.Authorization = `${token}` resolve(service(response.config)) }) }) } } return response && response.data }, (error) => { Message.error(error.response.data.msg) return Promise.reject(error) } )
到此這篇關(guān)于如何實現(xiàn)無感刷新token的文章就介紹到這了,更多相關(guān)實現(xiàn)無感刷新token內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue多層數(shù)據(jù)結(jié)構(gòu)響應(yīng)式失效,視圖更新失敗問題
這篇文章主要介紹了Vue多層數(shù)據(jù)結(jié)構(gòu)響應(yīng)式失效,視圖更新失敗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02vue3+ts+axios+pinia實現(xiàn)無感刷新方式
這篇文章主要介紹了vue3+ts+axios+pinia實現(xiàn)無感刷新方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04