Vue中如何處理token過期問題
更新時間：2022年10月13日 12:04:38 作者：燕穗子博客
這篇文章主要介紹了Vue中如何處理token過期問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
后端為了安全，token一般存在有效時間，當(dāng)token過期，所有請求失效
解決方案
方案一
在請求發(fā)起前攔截每個請求，判斷token的有效時間是否已經(jīng)過期，若已過期，則將請求掛起，先刷新token后再繼續(xù)請求。
- 優(yōu)點(diǎn)： 在請求前攔截，能節(jié)省請求，省流量
- 缺點(diǎn)： 需要后端額外提供一個token過期時間的字段；使用了本地時間判斷，若本地時間被篡改，特別是本地時間比服務(wù)器時間慢時，攔截會失敗
- 使用方法：axios.interceptors.request.use() 這個請求前攔截方法
方案二
根據(jù)攔截返回后的數(shù)據(jù)判斷，若token過期，先刷新token，再進(jìn)行一次請求。
- 優(yōu)點(diǎn)：不需額外的token過期字段，不需判斷時間
- 缺點(diǎn)： 會消耗多一次請求，耗流量
- 使用方法：axios.interceptors.response.use() 這個響應(yīng)攔截方法
最簡單方法：獲取到過期code，直接跳到登錄頁
方案三：封裝axios基本結(jié)構(gòu)
1、token是存在localStorage中
//在request.js
?
import axios from 'axios'
?
// 創(chuàng)建一個實(shí)例
const service = axios.create({
? ? baseURL: process.env.VUE_APP_BASE_API,?
? ? timeout: 5000 // request timeout
})
?
// 從localStorage中獲取token
function getLocalToken () {
? ? const token = window.localStorage.getItem('token')
? ? return token
}
?
// 給實(shí)例添加一個setToken方法，用于登錄后將最新token動態(tài)添加到header，同時將token保存在localStorage中
service.setToken = (token) => {
? instance.defaults.headers['X-Token'] = token
? window.localStorage.setItem('token', token)
}
?
// 攔截返回的數(shù)據(jù)
service.interceptors.response.use(response => {
? // 接下來會在這里進(jìn)行token過期的邏輯處理
? return response
}, error => {
? return Promise.reject(error)
})
?
//暴露
export default service假如后端接口token過期返回的code是401
//獲取新的token請求
function refreshToken () {
? ? return service.post('/refreshtoken').then(res => res.data)
}
?
// 攔截返回的數(shù)據(jù)
service.interceptors.response.use(response => {
? // 接下來會在這里進(jìn)行token過期的邏輯處理
? const { code } = response.data
? ?? ?-----------------------------------------------------------
? ?? ?// 說明token過期了,獲取新的token
?? ? if (code === 401) {
?? ??? ?return refreshToken().then(res => {
?? ??? ?// 刷新token成功，將最新的token更新到header中，同時保存在localStorage中
?? ? ? ? ?const { token } = res.data
?? ? ? ? ?service.setToken(token)
?? ? ? ? ?
?? ? ? ? ?// 獲取當(dāng)前失敗的請求
?? ? ? ? ?const config = response.config
?? ? ? ? ?//重置失敗請求的配置
?? ? ? ? ?config.headers['X-Token'] = token
?? ? ? ? ?config.baseURL = '' "
?? ? ? ? ?//重試當(dāng)前請求并返回promise
?? ? ? ? ?return service(config)
?? ??? ?}).catch( res=>{
?? ??? ??? ?//重新請求token失敗，跳轉(zhuǎn)到登錄頁
?? ??? ??? ?window.location.href = '/login '
?? ??? ?} )
?? ? }
?? ? --------------------------------------------------------------
? return response
?
}, error => {
? return Promise.reject(error)
})2、問題和優(yōu)化
如果token失效時，存在多個請求，這就會導(dǎo)致多次執(zhí)行刷新token的接口
在request.js中用一個變量來標(biāo)記當(dāng)前是否正在刷新token的狀態(tài)，如果正在刷新則不再調(diào)用刷新token的接口
在request.js
// 是否正在刷新的標(biāo)記
let isRefreshing = false
?
-----------------------------------------------------------
? ?? ?// 說明token過期了,獲取新的token
?? ? if (code === 401) {
?? ? ?? ?//判斷一下狀態(tài)
?? ??? ?if( !isRefreshing ){
?? ??? ??? ?//修改狀態(tài)，進(jìn)入更新token階段
?? ??? ??? ?isRefreshing = true
?? ??? ??? ?
?? ??? ??? ?return refreshToken().then(res => {
?? ??? ??? ?// 刷新token成功，將最新的token更新到header中，同時保存在localStorage中
?? ??? ? ? ? ?const { token } = res.data
?? ??? ? ? ? ?service.setToken(token)
?? ??? ? ? ? ?
?? ??? ? ? ? ?// 獲取當(dāng)前失敗的請求
?? ??? ? ? ? ?const config = response.config
?? ??? ? ? ? ?//重置失敗請求的配置
?? ??? ? ? ? ?config.headers['X-Token'] = token
?? ??? ? ? ? ?config.baseURL = '' "
?? ??? ? ? ? ?//重試當(dāng)前請求并返回promise
?? ??? ? ? ? ?return service(config)
?? ??? ??? ?}).catch( res=>{
?? ??? ??? ??? ?//重新請求token失敗，跳轉(zhuǎn)到登錄頁
?? ??? ??? ??? ?window.location.href = '/login '
?? ??? ??? ?} ).finally( ()=>{
?? ??? ??? ??? ?//完成之后在關(guān)閉狀態(tài)
?? ??? ??? ??? ?isRefreshing = false
?? ??? ??? ?} )
?? ??? ?}
?? ? }同時發(fā)起兩個或以上的請求時，其他接口如何重試
兩個接口幾乎同時發(fā)起和返回，第一個接口會進(jìn)入刷新token后重試的流程，而第二個接口需要先存起來，然后等刷新token后再重試。同樣，如果同時發(fā)起三個請求，此時需要緩存后兩個接口，等刷新token后再重試；
當(dāng)?shù)诙€過期的請求進(jìn)來，token正在刷新，我們先將這個請求存到一個數(shù)組隊(duì)列中，想辦法讓這個請求處于等待中，一直等到刷新token后再逐個重試清空請求隊(duì)列。
將請求存進(jìn)隊(duì)列中后，同時返回一個Promise，讓這個Promise一直處于Pending狀態(tài)（即不調(diào)用resolve），此時這個請求就會一直等啊等，只要我們不執(zhí)行resolve，這個請求就會一直在等待。當(dāng)刷新請求的接口返回來后，我們再調(diào)用resolve，逐個重試。
// 是否正在刷新的標(biāo)記
let isRefreshing = false
// 重試隊(duì)列，每一項(xiàng)將是一個待執(zhí)行的函數(shù)形式
let requests = []
?
-----------------------------------------------------------
? ?? ?// 說明token過期了,獲取新的token
?? ? if (code === 401) {
?? ? ?? ?const config = response.config
?? ? ?? ?//判斷一下狀態(tài)
?? ??? ?if( !isRefreshing ){
?? ??? ??? ?//修改狀態(tài)，進(jìn)入更新token階段
?? ??? ??? ?isRefreshing = true
?? ??? ??? ?// 獲取當(dāng)前的請求
?? ??? ??? ?return refreshToken().then(res => {
?? ??? ??? ?// 刷新token成功，將最新的token更新到header中，同時保存在localStorage中
?? ??? ? ? ? ?const { token } = res.data
?? ??? ? ? ? ?service.setToken(token)
?? ??? ? ? ? ?
?? ??? ? ? ? ?//重置失敗請求的配置
?? ??? ? ? ? ?config.headers['X-Token'] = token
?? ??? ? ? ? ?config.baseURL = '' "
?? ??? ? ? ? ?
?? ??? ? ? ? ?//已經(jīng)刷新了token，將所有隊(duì)列中的請求進(jìn)行重試
?? ??? ? ? ? ?requests.forEach(cb => cb(token))
?? ??? ? ? ? ?// 重試完了別忘了清空這個隊(duì)列
?? ??? ? ? ? ?requests = []
?? ??? ? ? ? ?
?? ??? ? ? ? ?return service(config)
?? ??? ??? ?}).catch( res=>{
?? ??? ??? ??? ?//重新請求token失敗，跳轉(zhuǎn)到登錄頁
?? ??? ??? ??? ?window.location.href = '/login '
?? ??? ??? ?} ).finally( ()=>{
?? ??? ??? ??? ?//完成之后在關(guān)閉狀態(tài)
?? ??? ??? ??? ?isRefreshing = false
?? ??? ??? ?} )
?? ??? ?} else{
?? ??? ??? ? // 正在刷新token，返回一個未執(zhí)行resolve的promise
?? ??? ??? ? return new Promise((resolve) => {
?? ? ? ? ? ? // 將resolve放進(jìn)隊(duì)列，用一個函數(shù)形式來保存，等token刷新后直接執(zhí)行
?? ??? ? ? ? ? ? requests.push((token) => {
?? ??? ??? ? ? ? ? ? ?config.baseURL = ''
?? ??? ??? ? ? ? ? ? ?config.headers['X-Token'] = token
?? ??? ??? ? ? ? ? ? ?resolve(instance(config))
?? ??? ? ? ? ? ?? ? })
?? ? ? ? ?? ? })
?? ??? ?}
?? ? }3、完整版
//在request.js
?
import axios from 'axios'
?
// 是否正在刷新的標(biāo)記
let isRefreshing = false
// 重試隊(duì)列，每一項(xiàng)將是一個待執(zhí)行的函數(shù)形式
let requests = []
?
// 創(chuàng)建一個實(shí)例
const service = axios.create({
? ? baseURL: process.env.VUE_APP_BASE_API,?
? ? timeout: 5000 // request timeout
})
?
// 從localStorage中獲取token
function getLocalToken () {
? ? const token = window.localStorage.getItem('token')
? ? return token
}
?
// 給實(shí)例添加一個setToken方法，用于登錄后將最新token動態(tài)添加到header，同時將token保存在localStorage中
service.setToken = (token) => {
? instance.defaults.headers['X-Token'] = token
? window.localStorage.setItem('token', token)
}
?
//獲取新的token請求
function refreshToken () {
? ? return service.post('/refreshtoken').then(res => res.data)
}
?
// 攔截返回的數(shù)據(jù)
service.interceptors.response.use(response => {
? // 接下來會在這里進(jìn)行token過期的邏輯處理
? const { code } = response.data
?? ?-----------------------------------------------------------
? ?? ?// 說明token過期了,獲取新的token
?? ? if (code === 401) {
?? ? ?? ?const config = response.config
?? ? ?? ?//判斷一下狀態(tài)
?? ??? ?if( !isRefreshing ){
?? ??? ??? ?//修改狀態(tài)，進(jìn)入更新token階段
?? ??? ??? ?isRefreshing = true
?? ??? ??? ?// 獲取當(dāng)前的請求
?? ??? ??? ?return refreshToken().then(res => {
?? ??? ??? ?// 刷新token成功，將最新的token更新到header中，同時保存在localStorage中
?? ??? ? ? ? ?const { token } = res.data
?? ??? ? ? ? ?service.setToken(token)
?? ??? ? ? ? ?
?? ??? ? ? ? ?//重置失敗請求的配置
?? ??? ? ? ? ?config.headers['X-Token'] = token
?? ??? ? ? ? ?config.baseURL = '' "
?? ??? ? ? ? ?
?? ??? ? ? ? ?//已經(jīng)刷新了token，將所有隊(duì)列中的請求進(jìn)行重試
?? ??? ? ? ? ?requests.forEach(cb => cb(token))
?? ??? ? ? ? ?// 重試完了別忘了清空這個隊(duì)列
?? ??? ? ? ? ?requests = []
?? ??? ? ? ? ?
?? ??? ? ? ? ?return service(config)
?? ??? ??? ?}).catch( res=>{
?? ??? ??? ??? ?//重新請求token失敗，跳轉(zhuǎn)到登錄頁
?? ??? ??? ??? ?window.location.href = '/login '
?? ??? ??? ?} ).finally( ()=>{
?? ??? ??? ??? ?//完成之后在關(guān)閉狀態(tài)
?? ??? ??? ??? ?isRefreshing = false
?? ??? ??? ?} )
?? ??? ?} else{
?? ??? ??? ? // 正在刷新token，返回一個未執(zhí)行resolve的promise
?? ??? ??? ? return new Promise((resolve) => {
?? ? ? ? ? ? // 將resolve放進(jìn)隊(duì)列，用一個函數(shù)形式來保存，等token刷新后直接執(zhí)行
?? ??? ? ? ? ? ? requests.push((token) => {
?? ??? ??? ? ? ? ? ? ?config.baseURL = ''
?? ??? ??? ? ? ? ? ? ?config.headers['X-Token'] = token
?? ??? ??? ? ? ? ? ? ?resolve(instance(config))
?? ??? ? ? ? ? ?? ? })
?? ? ? ? ?? ? })
?? ??? ?}
?? ? }
?? ? --------------------------------------------------------------
? return response
}, error => {
? return Promise.reject(error)
})
//暴露
export default service以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則
這篇文章主要給大家介紹了關(guān)于vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則的相關(guān)資料,文中通過代碼介紹的介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
Vue Element校驗(yàn)validate的實(shí)例
這篇文章主要介紹了Vue Element校驗(yàn)validate的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
解決vue中el-date-picker?type=daterange日期不回顯的問題
這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
有些時候，不得不想添加、修改數(shù)組和對象的值，但是直接添加、修改后又失去了getter、setter,由于JavaScript的限制， Vue不能檢測以部分變動的數(shù)組2017-03-03
這篇文章主要介紹了Vuex中的Mutation使用詳解,當(dāng)我們想修改狀態(tài)值,想傳入的值進(jìn)而進(jìn)行修改時,你可以向 store.commit 傳入額外的參數(shù),即 mutation 的 載荷,需要的朋友可以參考下2023-11-11
本文介紹Vue組件間通信方式，Vue組件間通信一直是個重要的話題，雖然官方推出的Vuex狀態(tài)管理方案可以很好的解決組件之間的通信問題，但是在組件庫內(nèi)部使用Vuex往往會比較重，本文將系統(tǒng)的羅列出幾種不使用Vuex，比較實(shí)用的組件間的通信方式，希望能幫助到大家2022-09-09
在Vue項(xiàng)目中使用snapshot測試的具體使用
這篇文章主要介紹了在Vue項(xiàng)目中使用snapshot測試的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
使用Vue3實(shí)現(xiàn)列表虛擬滾動的詳細(xì)步驟
在前端開發(fā)中,列表的虛擬滾動是一種常見的優(yōu)化手段,可以大大提升頁面性能,在Vue3中,我們可以通過一些技巧來實(shí)現(xiàn)列表的虛擬滾動,本文將介紹如何使用Vue3實(shí)現(xiàn)列表的虛擬滾動,讓你的頁面加載更快、更流暢,需要的朋友可以參考下2024-09-09
vue實(shí)現(xiàn)token過期自動跳轉(zhuǎn)到登錄頁面
本文主要介紹了vue實(shí)現(xiàn)token過期自動跳轉(zhuǎn)到登錄頁面，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Vue3+TypeScript實(shí)現(xiàn)二維碼生成組件
在?Web?應(yīng)用中,生成二維碼是常見的需求,本文介紹如何用?Vue3?和?TypeScript?開發(fā)一個二維碼生成組件,支持生成圖片或?canvas?形式的二維碼,并提供豐富的配置選項(xiàng),感興趣的小伙伴跟著小編一起來看看吧2024-04-04