如何實(shí)現(xiàn)無(wú)感刷新token
前言:
最近在做需求的時(shí)候,涉及到登錄token
,產(chǎn)品提出一個(gè)問(wèn)題:能不能讓token
過(guò)期時(shí)間長(zhǎng)一點(diǎn),我頻繁的要去登錄。
前端:后端,你能不能把token 過(guò)期時(shí)間設(shè)置的長(zhǎng)一點(diǎn)。
后端:可以,但是那樣做不安全,你可以用更好的方法。
前端:什么方法?
后端:給你刷新token的接口,定時(shí)去刷新token
前端:好,讓我思考一下
1、需求
當(dāng)token
過(guò)期的時(shí)候,刷新token
,前端需要做到無(wú)感刷新token
,即刷token
時(shí)要做到用戶無(wú)感知,避免頻繁登錄。實(shí)現(xiàn)思路
方法一
后端返回過(guò)期時(shí)間,前端判斷token
過(guò)期時(shí)間,去調(diào)用刷新to
ken接口
缺點(diǎn):需要后端額外提供一個(gè)token
過(guò)期時(shí)間的字段;使用了本地時(shí)間判斷,若本地時(shí)間被篡改,特別是本地時(shí)間比服務(wù)器時(shí)間慢時(shí),攔截會(huì)失敗。
方法二
寫個(gè)定時(shí)器,定時(shí)刷新token
接口
缺點(diǎn):浪費(fèi)資源,消耗性能,不建議采用。
方法三
在響應(yīng)攔截器中攔截,判斷token
返回過(guò)期后,調(diào)用刷新token接口
2、實(shí)現(xiàn)
axios
的基本骨架,利用service.interceptors.response
進(jìn)行攔截
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、問(wèn)題解決
問(wèn)題一:如何防止多次刷新token
我們通過(guò)一個(gè)變量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) })
問(wèn)題二:同時(shí)發(fā)起兩個(gè)或者兩個(gè)以上的請(qǐng)求時(shí),其他接口怎么解決
當(dāng)?shù)诙€(gè)過(guò)期的請(qǐng)求進(jìn)來(lái),token
正在刷新,我們先將這個(gè)請(qǐng)求存到一個(gè)數(shù)組隊(duì)列中,想辦法讓這個(gè)請(qǐng)求處于等待中,一直等到刷新token
后再逐個(gè)重試清空請(qǐng)求隊(duì)列。那么如何做到讓這個(gè)請(qǐng)求處于等待中呢?為了解決這個(gè)問(wèn)題,我們得借助Promise
。將請(qǐng)求存進(jìn)隊(duì)列中后,同時(shí)返回一個(gè)Promise
,讓這個(gè)Promise
一直處于Pending
狀態(tài)(即不調(diào)用resolve),此時(shí)這個(gè)請(qǐng)求就會(huì)一直等啊等,只要我們不執(zhí)行resolve
,這個(gè)請(qǐng)求就會(huì)一直在等待。當(dāng)刷新請(qǐng)求的接口返回來(lái)后,我們?cè)僬{(diào)用resolve,逐個(gè)重試。
最終代碼:
import axios from 'axios' // 是否正在刷新的標(biāo)記 let isRefreshing = false //重試隊(duì)列 let requests = [] service.interceptors.response.use( response => { //約定code 409 token 過(guò)期 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 = [] // 重新請(qǐng)求完清空 return service(response.config) }).catch(err => { //跳到登錄頁(yè) 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)于如何實(shí)現(xiàn)無(wú)感刷新token的文章就介紹到這了,更多相關(guān)實(shí)現(xiàn)無(wú)感刷新token內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- VUE前端實(shí)現(xiàn)token的無(wú)感刷新3種方案(refresh_token)
- VUE前端實(shí)現(xiàn)token的無(wú)感刷新方式
- js項(xiàng)目中前端如何實(shí)現(xiàn)無(wú)感刷新token
- 前端雙token無(wú)感刷新圖文詳解
- 前端無(wú)感刷新token的實(shí)現(xiàn)步驟
- Vue項(xiàng)目實(shí)現(xiàn)token無(wú)感刷新的示例代碼
- 雙Token無(wú)感刷新機(jī)制實(shí)現(xiàn)方式
- Vue實(shí)現(xiàn)雙token無(wú)感刷新的示例代碼
- 雙token無(wú)感刷新nodejs+React詳細(xì)解釋(保姆級(jí)教程)
相關(guān)文章
詳解lottie動(dòng)畫在vue中的應(yīng)用
Lottie 是一個(gè)適用于 Android、iOS、Web 和 Windows 的庫(kù),它使用 Bodymovin 解析導(dǎo)出為 JSON 的 Adobe After Effects 動(dòng)畫,下面我們就來(lái)看看它在vue中的是如何應(yīng)用的吧2023-12-12Vue多層數(shù)據(jù)結(jié)構(gòu)響應(yīng)式失效,視圖更新失敗問(wèn)題
這篇文章主要介紹了Vue多層數(shù)據(jù)結(jié)構(gòu)響應(yīng)式失效,視圖更新失敗問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02vue和小程序項(xiàng)目中使用iconfont的方法
這篇文章主要介紹了vue中和小程序中使用iconfont的方法,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05vue3+ts+axios+pinia實(shí)現(xiàn)無(wú)感刷新方式
這篇文章主要介紹了vue3+ts+axios+pinia實(shí)現(xiàn)無(wú)感刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04