您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)如何實(shí)現(xiàn)無(wú)感刷新token,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
前言:
最近在做需求的時(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)用刷新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接口
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) })
我們通過(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) })
當(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) } )
看完上述內(nèi)容,你們對(duì)如何實(shí)現(xiàn)無(wú)感刷新token有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。