Vue項(xiàng)目實(shí)現(xiàn)token無(wú)感刷新的示例代碼
背景
最近在使用系統(tǒng)的過程中,業(yè)務(wù)人員反饋剛登錄一會(huì)就提示token過期需要重新登錄,這樣體驗(yàn)很不友好,他們想要把過期時(shí)間設(shè)置長(zhǎng)一點(diǎn),不想頻繁去登陸。
思考
如果token時(shí)間設(shè)置的太長(zhǎng),會(huì)有安全的問題;如果可以檢測(cè)到token過期,然后請(qǐng)求新的token替換過期的token,再去請(qǐng)求接口,這樣token過期,做到用戶無(wú)感知。
實(shí)現(xiàn)
檢測(cè)token過期可以主動(dòng)和被動(dòng)的去處理,簡(jiǎn)單來(lái)說(shuō),主動(dòng)判斷就是在token過期前就處理,被動(dòng)的就是token過期后再去處理。
以下從用三個(gè)方法來(lái)實(shí)現(xiàn)token的無(wú)感刷新。
1.通過返回過期字段判斷
通過token認(rèn)證接口返回的過期字段判斷,然后本地時(shí)間進(jìn)行對(duì)比,如果過期就重新獲取token,這個(gè)也有缺點(diǎn),如果本地時(shí)間不準(zhǔn)確,會(huì)存在判斷失誤問題。
2.通過定時(shí)刷新獲取token
寫個(gè)全局定時(shí)器,定時(shí)刷新token。這個(gè)方法顯然不好,不建議使用。
3.通過axios響應(yīng)攔截器中攔截
判斷token 返回過期后,調(diào)用刷新token接口
實(shí)現(xiàn):
// 創(chuàng)建 axios 實(shí)例 const request = axios.create({ // API 請(qǐng)求的默認(rèn)前綴 baseURL: baseUrl, withCredentials: true, timeout: 30000 // 請(qǐng)求超時(shí)時(shí)間 }) // 此處是為了為了防止多次刷新token,可以通過一個(gè)變量isRefreshing 去控制是否在刷新token的狀態(tài)。 let isRefreshing = false // 是否正在刷新的標(biāo)記 此次為了解決同時(shí)發(fā)起兩個(gè)或兩個(gè)以上的請(qǐng)求時(shí),過期如何處理 let requests = [] // 重試隊(duì)列 // 異常攔截處理器 const errorHandler = error => { if (error.response) { //token過期狀態(tài)碼 if (error.response.status === 401) { if (!isRefreshing) { // 正在刷新,執(zhí)行else里面的邏輯 isRefreshing = true return store.dispatch('RefreshToken',store.state.user.refresh_token).then(res => { //獲取新的token,這里的邏輯自行處理,access_token和refresh_token都需要替換保存 error.config.headers.Authorization = 'Bearer ' + res.access_token // token 請(qǐng)求成功后將數(shù)組的方法重新執(zhí)行 requests.forEach((cb) => cb(res.access_token)) requests = [] // 重新請(qǐng)求完清空 return request(error.config) }).catch(() => { // 如果刷新的refresh_token也過期了,重新登錄 notification.error({ message: 'token過期', description: '請(qǐng)重新登錄' }) if (token) { store.dispatch('Logout').then(() => { window.location.reload() }) } }).finally(() => { isRefreshing = false }) } else { // 返回未執(zhí)行 resolve 的 Promise return new Promise(resolve => { // 用函數(shù)形式將 resolve 存入,等待刷新后再執(zhí)行 requests.push(token => { error.config.headers.Authorization = 'Bearer ' + token resolve(request(error.config)) }) }) } } } return Promise.reject(error) } request.interceptors.response.use(response => { //...... }, errorHandler)
到此這篇關(guān)于Vue項(xiàng)目實(shí)現(xiàn)token無(wú)感刷新的示例代碼的文章就介紹到這了,更多相關(guān)Vue token無(wú)感刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 如何實(shí)現(xiàn)無(wú)感刷新token
- 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)步驟
- 雙Token無(wú)感刷新機(jī)制實(shí)現(xiàn)方式
- Vue實(shí)現(xiàn)雙token無(wú)感刷新的示例代碼
- 雙token無(wú)感刷新nodejs+React詳細(xì)解釋(保姆級(jí)教程)
相關(guān)文章
vant?Cascader級(jí)聯(lián)選擇實(shí)現(xiàn)可以選擇任意一層級(jí)
這篇文章主要介紹了vant?Cascader級(jí)聯(lián)選擇實(shí)現(xiàn)可以選擇任意一層級(jí)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07vue實(shí)現(xiàn)路由不變的情況下,刷新頁(yè)面操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)路由不變的情況下,刷新頁(yè)面操作,結(jié)合實(shí)例形式分析了vue路由不變的情況下刷新頁(yè)面具體原理、操作方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-02-02Vue POST請(qǐng)求頭'Content-Type':'application/j
這篇文章主要介紹了Vue POST請(qǐng)求頭'Content-Type':'application/json;',data上傳過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03在Flask項(xiàng)目中集成并訪問Vue前端項(xiàng)目的流程步驟
在現(xiàn)代?Web?開發(fā)中,前后端分離的架構(gòu)模式越來(lái)越流行,前端通常使用?Vue、React?等框架開發(fā),而后端則使用?Flask、Django?等框架提供?API?服務(wù),本文將詳細(xì)介紹如何在一個(gè)?Flask?項(xiàng)目中集成?Vue?前端項(xiàng)目,并確保能夠正確訪問和運(yùn)行,需要的朋友可以參考下2025-03-03vue跳轉(zhuǎn)頁(yè)面的幾種常用方法實(shí)例總結(jié)
Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界面,在Vue中,頁(yè)面跳轉(zhuǎn)通常使用路由(Router)來(lái)實(shí)現(xiàn),除此之外還有很多方法,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁(yè)面的幾種常用方法,需要的朋友可以參考下2024-05-05