VUE前端實(shí)現(xiàn)token的無感刷新方式
前言
說實(shí)話,這個(gè)其實(shí)沒啥好講的,要說有復(fù)雜度的話,也主要是在后端。
實(shí)現(xiàn)token無感刷新對(duì)于前端來說是一項(xiàng)十分常用的技術(shù),其本質(zhì)都是為了優(yōu)化用戶體驗(yàn),當(dāng)token過期時(shí)不需要用戶調(diào)回登錄頁重新登錄,而是當(dāng)token失效時(shí),進(jìn)行攔截,發(fā)送刷新token的請(qǐng)求,獲取最新的token進(jìn)行覆蓋,讓用戶感受不到token已過期。
token刷新的方案
方案一:后端返回過期時(shí)間,前端判斷token過期時(shí)間,去調(diào)用刷新token的接口
缺點(diǎn):需要后端提供一個(gè)token過期時(shí)間的字段;使用本地時(shí)間判斷,若本地時(shí)間被修改,本地時(shí)間比服務(wù)器時(shí)間慢,攔截會(huì)失敗。
方案二:寫個(gè)定時(shí)器,定時(shí)刷新token接口
缺點(diǎn):浪費(fèi)資源,消耗性能,不建議采用
方案三:在響應(yīng)攔截器中攔截,判斷token返回過期后,調(diào)用刷新token接口(?推薦使用)
具體思路
token失效后接口返回401
有感刷新: 清除token,強(qiáng)制跳轉(zhuǎn)回登錄頁,有感知的重新登錄拿到新token替換到本地,體驗(yàn)不好
無感刷新: 使用登錄時(shí)保存的refresh_token調(diào)用另一個(gè)接口,換回新的token值,替換到本地,再次完成本次未完成的請(qǐng)求(用戶無感知)
具體步驟:
1、首次登錄的時(shí)候會(huì)獲取到兩個(gè)token, 一個(gè)是平時(shí)請(qǐng)求接口正常使用的token(過期時(shí)間短),另一個(gè)是專門用于刷新的refresh_token(過期時(shí)間一般比較長(zhǎng)),登陸時(shí)都存起來 localStorage.setItem(‘refresh_token’,xxx) localStorage.setItem(‘token’, xxx)
2、在響應(yīng)攔截器中對(duì)401狀態(tài)碼引入刷新token的api方法調(diào)用
3、替換保存本地新的token
4、headers替換新的token
5、axios再次發(fā)起未完成的請(qǐng)求,返回promise對(duì)象到最開始發(fā)起請(qǐng)求的頁面
6、如果refresh_token也過期了,那就判斷是否過期,過期了就清除localstorage跳轉(zhuǎn)回登錄頁面
登陸時(shí)拿到的后端數(shù)據(jù):
存起來
refreshToken.js
import request from './request export function refreshToken() { const resp = request.get('/refresh_token', { headers: { token: `${refresh_token}` }, __isRefreshToken: true }) // return resp.code === 0 // 等于0表示刷新token成功 } export function isRefreshRequest(config) { return !!config.__isRefreshToken //兩個(gè)取反,變成boolean }
request.js
import axios from 'axios' import { refreshToken, isRefreshRequest } form './refreshToken.js' // 創(chuàng)建axios實(shí)例 const service = axios.create({ // baseURL: '',// 所有的請(qǐng)求地址前綴部分 timeout: 25000, // 請(qǐng)求超時(shí)時(shí)間(毫秒) withCredentials: true// 異步請(qǐng)求攜帶cookie }) // 請(qǐng)求攔截器 service.interceptors.request.use((config: any) => { ... }, error => { ... }) // 響應(yīng)攔截器 service.interceptors.response.use((response: any) => { let res = response.data if (res.code == '401' && !isRefreshRequest(res.config)){ // 如果沒有權(quán)限且不是刷新token的請(qǐng)求 // 刷新token try { const res = await refreshToken() // 保存新的token localStorage.setItem('token', res.data.token) // 有新token后再重新請(qǐng)求 response.config.headers.token = localStorage.getItem('token') // 新token const resp = await service.request(response.config) return resp.data // return service(response.config) }catch { localStorage.clear() // 清除token router.replace('/login') // 跳轉(zhuǎn)到登錄頁 } } }, error => { ... console.log('error', error) return Promise.reject(error) })
問題一:如何防止多次刷新token
為了防止多次刷新token,可以通過一個(gè)變量isRefreshing 去控制是否在刷新token的狀態(tài)
request.js
import axios from 'axios' import { refreshToken, isRefreshRequest } form './refreshToken.js' // 創(chuàng)建axios實(shí)例 const service = axios.create({ // baseURL: '',// 所有的請(qǐng)求地址前綴部分 timeout: 25000, // 請(qǐng)求超時(shí)時(shí)間(毫秒) withCredentials: true// 異步請(qǐng)求攜帶cookie }) // 請(qǐng)求攔截器 service.interceptors.request.use((config: any) => { ... }, error => { ... }) // 響應(yīng)攔截器 service.interceptors.response.use((response: any) => { let res = response.data let isRefreshing = false if (res.code == '401' && ! isRefreshRequest(res.config)){ // 如果沒有權(quán)限且不是刷新token的請(qǐng)求 if (!isRefreshing) { isRefreshing = true // 刷新token try { const res = await refreshToken() // 保存新的token localStorage.setItem('token', res.data.token) // 有新token后再重新請(qǐng)求 response.config.headers.token = localStorage.getItem('token') // 新token const resp = await service.request(response.config) return resp.data // return service(response.config) }catch { localStorage.clear() // 清除token router.replace('/login') // 跳轉(zhuǎn)到登錄頁 } isRefreshing = false } } }, error => { ... console.log('error', error) return Promise.reject(error) })
問題二:同時(shí)發(fā)起兩個(gè)或者兩個(gè)以上的請(qǐng)求時(shí),怎么刷新token
當(dāng)?shù)诙€(gè)過期的請(qǐng)求進(jìn)來,token正在刷新,我們先將這個(gè)請(qǐng)求存到一個(gè)數(shù)組隊(duì)列中,想辦法讓這個(gè)請(qǐng)求處于等待中,一直等到刷新token后再逐個(gè)重試清空請(qǐng)求隊(duì)列。
那么如何做到讓這個(gè)請(qǐng)求處于等待中呢?
為了解決這個(gè)問題,我們得借助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)求的接口返回來后,我們?cè)僬{(diào)用resolve,逐個(gè)重試。
request.js
import axios from 'axios' import { refreshToken, isRefreshRequest } form './refreshToken.js' // 創(chuàng)建axios實(shí)例 const service = axios.create({ // baseURL: '',// 所有的請(qǐng)求地址前綴部分 timeout: 25000, // 請(qǐng)求超時(shí)時(shí)間(毫秒) withCredentials: true// 異步請(qǐng)求攜帶cookie }) // 請(qǐng)求攔截器 service.interceptors.request.use((config: any) => { ... }, error => { ... }) // 響應(yīng)攔截器 service.interceptors.response.use((response: any) => { let res = response.data let isRefreshing = false let requests = [] // 請(qǐng)求隊(duì)列 if (res.code == '401' && isRefreshRequest(res.config)){ // 如果沒有權(quán)限且不是刷新token的請(qǐng)求 if (!isRefreshing) { isRefreshing = true // 刷新token try { const res = await refreshToken() // 保存新的token localStorage.setItem('token', res.data.token) // 有新token后再重新請(qǐng)求 response.config.headers.token = localStorage.getItem('token') // 新token // token 刷新后將數(shù)組的方法重新執(zhí)行 requests.forEach((cb) => cb(token)) requests = [] // 重新請(qǐng)求完清空 const resp = await service.request(response.config) return resp.data // return service(response.config) }catch { localStorage.clear() // 清除token router.replace('/login') // 跳轉(zhuǎn)到登錄頁 } isRefreshing = false } else { // 返回未執(zhí)行 resolve 的 Promise return new Promise(resolve => { // 用函數(shù)形式將 resolve 存入,等待刷新后再執(zhí)行 request.push(token => { response.config.headers.token = `${token}` resolve(service(response.config)) }) }) } } }, error => { ... console.log('error', error) return Promise.reject(error) })
具體可以學(xué)習(xí)這個(gè)視頻
token無感刷新
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式)
如果想要獲取選中的日期時(shí)間就需要通過,Element Plus 日期選擇器?format屬性和value-format屬性,format指定輸入框的格式,value-format?指定綁定值的格式,本篇文章就給大家介紹Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式),感興趣的朋友一起看看吧2023-10-10el-date-picker日期時(shí)間選擇器的選擇時(shí)間限制到分鐘級(jí)別
文章介紹了如何使用el-date-picker 組件來限制用戶選擇的時(shí)間,禁止選擇當(dāng)前時(shí)間的日期及時(shí)分,同時(shí)允許選擇其他日期的全天時(shí)分,通過設(shè)置 `pickerOptions` 對(duì)象的屬性,可以實(shí)現(xiàn)對(duì)日期和時(shí)間的精確控制,感興趣的朋友跟隨小編一起看看吧2025-01-01Vue項(xiàng)目返回頁面保持上次滾動(dòng)狀態(tài)方式
這篇文章主要介紹了Vue項(xiàng)目返回頁面保持上次滾動(dòng)狀態(tài)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04vue2.0中vue-cli實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的實(shí)例代碼
本篇文章主要介紹了vue2.0中vue-cli實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07詳解 vue better-scroll滾動(dòng)插件排坑
本篇文章主要介紹了詳解 vue better-scroll滾動(dòng)插件排坑,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02移動(dòng)端滑動(dòng)切換組件封裝 vue-swiper-router實(shí)例詳解
這篇文章主要介紹了移動(dòng)端滑動(dòng)切換組件封裝 vue-swiper-router實(shí)例詳解,需要的朋友可以參考下2018-11-11Vue-ANTD表單輸入中自定義校驗(yàn)一些正則表達(dá)式規(guī)則介紹
這篇文章主要介紹了Vue-ANTD表單輸入中自定義校驗(yàn)一些正則表達(dá)式規(guī)則介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01