無(wú)感刷新 token 你是怎么做的，不妨進(jìn)來(lái)看看

原文: https://juejin.cn/post/6983582201690456071

前言

最近在做需求的時(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

前端：好，讓我思考一下

需求

當(dāng)token過(guò)期的時(shí)候，刷新token,前端需要做到無(wú)感刷新token,即刷token時(shí)要做到用戶無(wú)感知，避免頻繁登錄。實(shí)現(xiàn)思路

• 方法一

后端返回過(guò)期時(shí)間，前端判斷token過(guò)期時(shí)間,去調(diào)用刷新token接口

缺點(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接口

實(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)
??}
)

問(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}`
????????}).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)
??}
)

最后

產(chǎn)品的需求就完成啦，不知道還有沒有更好的解決方案，可以評(píng)論區(qū)留言，說(shuō)出你的做法。