Vue中如何處理token過期問題

更新時(shí)間：2022年10月13日 12:04:38 作者：燕穗子博客

這篇文章主要介紹了Vue中如何處理token過期問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

解決方案

方案一

在請求發(fā)起前攔截每個(gè)請求，判斷token的有效時(shí)間是否已經(jīng)過期，若已過期，則將請求掛起，先刷新token后再繼續(xù)請求。

優(yōu)點(diǎn)：在請求前攔截，能節(jié)省請求，省流量
缺點(diǎn)：需要后端額外提供一個(gè)token過期時(shí)間的字段；使用了本地時(shí)間判斷，若本地時(shí)間被篡改，特別是本地時(shí)間比服務(wù)器時(shí)間慢時(shí)，攔截會(huì)失敗
使用方法：axios.interceptors.request.use() 這個(gè)請求前攔截方法

方案二

根據(jù)攔截返回后的數(shù)據(jù)判斷，若token過期，先刷新token，再進(jìn)行一次請求。

優(yōu)點(diǎn)：不需額外的token過期字段，不需判斷時(shí)間
缺點(diǎn)：會(huì)消耗多一次請求，耗流量
使用方法：axios.interceptors.response.use() 這個(gè)響應(yīng)攔截方法

最簡單方法：獲取到過期code，直接跳到登錄頁

方案三：封裝axios基本結(jié)構(gòu)

1、token是存在localStorage中

//在request.js
?
import axios from 'axios'
?
// 創(chuàng)建一個(gè)實(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í)例添加一個(gè)setToken方法，用于登錄后將最新token動(dòng)態(tài)添加到header，同時(shí)將token保存在localStorage中
service.setToken = (token) => {
? instance.defaults.headers['X-Token'] = token
? window.localStorage.setItem('token', token)
}
?
// 攔截返回的數(shù)據(jù)
service.interceptors.response.use(response => {
? // 接下來會(huì)在這里進(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 => {
? // 接下來會(huì)在這里進(jìn)行token過期的邏輯處理
? const { code } = response.data
? ?? ?-----------------------------------------------------------
? ?? ?// 說明token過期了,獲取新的token
?? ? if (code === 401) {
?? ??? ?return refreshToken().then(res => {
?? ??? ?// 刷新token成功，將最新的token更新到header中，同時(shí)保存在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失效時(shí)，存在多個(gè)請求，這就會(huì)導(dǎo)致多次執(zhí)行刷新token的接口

在request.js中用一個(gè)變量來標(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中，同時(shí)保存在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
?? ??? ??? ?} )
?? ??? ?}
?? ? }

同時(shí)發(fā)起兩個(gè)或以上的請求時(shí)，其他接口如何重試

兩個(gè)接口幾乎同時(shí)發(fā)起和返回，第一個(gè)接口會(huì)進(jìn)入刷新token后重試的流程，而第二個(gè)接口需要先存起來，然后等刷新token后再重試。同樣，如果同時(shí)發(fā)起三個(gè)請求，此時(shí)需要緩存后兩個(gè)接口，等刷新token后再重試；

當(dāng)?shù)诙€(gè)過期的請求進(jìn)來，token正在刷新，我們先將這個(gè)請求存到一個(gè)數(shù)組隊(duì)列中，想辦法讓這個(gè)請求處于等待中，一直等到刷新token后再逐個(gè)重試清空請求隊(duì)列。

將請求存進(jìn)隊(duì)列中后，同時(shí)返回一個(gè)Promise，讓這個(gè)Promise一直處于Pending狀態(tài)（即不調(diào)用resolve），此時(shí)這個(gè)請求就會(huì)一直等啊等，只要我們不執(zhí)行resolve，這個(gè)請求就會(huì)一直在等待。當(dāng)刷新請求的接口返回來后，我們再調(diào)用resolve，逐個(gè)重試。

// 是否正在刷新的標(biāo)記
let isRefreshing = false
// 重試隊(duì)列，每一項(xiàng)將是一個(gè)待執(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中，同時(shí)保存在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))
?? ??? ? ? ? ?// 重試完了別忘了清空這個(gè)隊(duì)列
?? ??? ? ? ? ?requests = []
?? ??? ? ? ? ?
?? ??? ? ? ? ?return service(config)
?? ??? ??? ?}).catch( res=>{
?? ??? ??? ??? ?//重新請求token失敗，跳轉(zhuǎn)到登錄頁
?? ??? ??? ??? ?window.location.href = '/login '
?? ??? ??? ?} ).finally( ()=>{
?? ??? ??? ??? ?//完成之后在關(guān)閉狀態(tài)
?? ??? ??? ??? ?isRefreshing = false
?? ??? ??? ?} )
?? ??? ?} else{
?? ??? ??? ? // 正在刷新token，返回一個(gè)未執(zhí)行resolve的promise
?? ??? ??? ? return new Promise((resolve) => {
?? ? ? ? ? ? // 將resolve放進(jìn)隊(duì)列，用一個(gè)函數(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)將是一個(gè)待執(zhí)行的函數(shù)形式
let requests = []
?
// 創(chuàng)建一個(gè)實(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í)例添加一個(gè)setToken方法，用于登錄后將最新token動(dòng)態(tài)添加到header，同時(shí)將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 => {
? // 接下來會(huì)在這里進(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中，同時(shí)保存在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))
?? ??? ? ? ? ?// 重試完了別忘了清空這個(gè)隊(duì)列
?? ??? ? ? ? ?requests = []
?? ??? ? ? ? ?
?? ??? ? ? ? ?return service(config)
?? ??? ??? ?}).catch( res=>{
?? ??? ??? ??? ?//重新請求token失敗，跳轉(zhuǎn)到登錄頁
?? ??? ??? ??? ?window.location.href = '/login '
?? ??? ??? ?} ).finally( ()=>{
?? ??? ??? ??? ?//完成之后在關(guān)閉狀態(tài)
?? ??? ??? ??? ?isRefreshing = false
?? ??? ??? ?} )
?? ??? ?} else{
?? ??? ??? ? // 正在刷新token，返回一個(gè)未執(zhí)行resolve的promise
?? ??? ??? ? return new Promise((resolve) => {
?? ? ? ? ? ? // 將resolve放進(jìn)隊(duì)列，用一個(gè)函數(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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: