后端为了安全 ，token一般存在有效时间 ，当token过期 ，所有请求失效
解决方案
方案一
在请求发起前拦截每个请求 ，判断token的有效时间是否已经过期 ，若已过期 ，则将请求挂起 ，先刷新token后再继续请求 。
优点： 在请求前拦截 ，能节省请求 ，省流量
缺点： 需要后端额外提供一个token过期时间的字段；使用了本地时间判断 ，若本地时间被篡改 ，特别是本地时间比服务器时间慢时 ，拦截会失败
使用方法：axios.interceptors.request.use() 这个请求前拦截方法
方案二
根据拦截返回后的数据判断 ，若token过期 ，先刷新token ，再进行一次请求 。
优点：不需额外的token过期字段 ，不需判断时间
缺点： 会消耗多一次请求 ，耗流量
使用方法：axios.interceptors.response.use() 这个响应拦截方法
最简单方法：获取到过期code ，直接跳到登录页
方案三：封装axios基本结构
1 、token是存在localStorage中
//在request.js
import axios from axios
// 创建一个实例
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
}
// 给实例添加一个setToken方法 ，用于登录后将最新token动态添加到header ，同时将token保存在localStorage中
service.setToken = (token) => {
instance.defaults.headers[X-Token] = token
window.localStorage.setItem(token, token)
}
// 拦截返回的数据
service.interceptors.response.use(response => {
// 接下来会在这里进行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)
}
// 拦截返回的数据
service.interceptors.response.use(response => {
// 接下来会在这里进行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)
// 获取当前失败的请求
const config = response.config
//重置失败请求的配置
config.headers[X-Token] = token
config.baseURL = "
//重试当前请求并返回promise
return service(config)
}).catch( res=>{
//重新请求token失败 ，跳转到登录页
window.location.href = /login
} )
}
--------------------------------------------------------------
return response
}, error => {
return Promise.reject(error)
})
2 、问题和优化
如果token失效时 ，存在多个请求 ，这就会导致多次执行刷新token的接口
在request.js中用一个变量来标记当前是否正在刷新token的状态 ，如果正在刷新则不再调用刷新token的接口
在request.js
// 是否正在刷新的标记
let isRefreshing = false
-----------------------------------------------------------
// 说明token过期了,获取新的token
if (code === 401) {
//判断一下状态
if( !isRefreshing ){
//修改状态 ，进入更新token阶段
isRefreshing = true
return refreshToken().then(res => {
// 刷新token成功 ，将最新的token更新到header中 ，同时保存在localStorage中
const { token } = res.data
service.setToken(token)
// 获取当前失败的请求
const config = response.config
//重置失败请求的配置
config.headers[X-Token] = token
config.baseURL = "
//重试当前请求并返回promise
return service(config)
}).catch( res=>{
//重新请求token失败 ，跳转到登录页
window.location.href = /login
} ).finally( ()=>{
//完成之后在关闭状态
isRefreshing = false
} )
}
}
同时发起两个或以上的请求时 ，其他接口如何重试
两个接口几乎同时发起和返回 ，第一个接口会进入刷新token后重试的流程 ，而第二个接口需要先存起来 ，然后等刷新token后再重试 。同样 ，如果同时发起三个请求 ，此时需要缓存后两个接口 ，等刷新token后再重试；
当第二个过期的请求进来 ，token正在刷新 ，我们先将这个请求存到一个数组队列中 ，想办法让这个请求处于等待中 ，一直等到刷新token后再逐个重试清空请求队列 。
将请求存进队列中后 ，同时返回一个Promise ，让这个Promise一直处于Pending状态（即不调用resolve） ，此时这个请求就会一直等啊等 ，只要我们不执行resolve ，这个请求就会一直在等待 。当刷新请求的接口返回来后 ，我们再调用resolve ，逐个重试 。
// 是否正在刷新的标记
let isRefreshing = false
// 重试队列 ，每一项将是一个待执行的函数形式
let requests = []
-----------------------------------------------------------
// 说明token过期了,获取新的token
if (code === 401) {
const config = response.config
//判断一下状态
if( !isRefreshing ){
//修改状态 ，进入更新token阶段
isRefreshing = true
// 获取当前的请求
return refreshToken().then(res => {
// 刷新token成功 ，将最新的token更新到header中 ，同时保存在localStorage中
const { token } = res.data
service.setToken(token)
//重置失败请求的配置
config.headers[X-Token] = token
config.baseURL = "
//已经刷新了token ，将所有队列中的请求进行重试
requests.forEach(cb => cb(token))
// 重试完了别忘了清空这个队列
requests = []
return service(config)
}).catch( res=>{
//重新请求token失败 ，跳转到登录页
window.location.href = /login
} ).finally( ()=>{
//完成之后在关闭状态
isRefreshing = false
} )
} else{
// 正在刷新token ，返回一个未执行resolve的promise
return new Promise((resolve) => {
// 将resolve放进队列 ，用一个函数形式来保存 ，等token刷新后直接执行
requests.push((token) => {
config.baseURL =
config.headers[X-Token] = token
resolve(instance(config))
})
})
}
}
3 、完整版
//在request.js
import axios from axios
// 是否正在刷新的标记
let isRefreshing = false
// 重试队列 ，每一项将是一个待执行的函数形式
let requests = []
// 创建一个实例
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
}
// 给实例添加一个setToken方法 ，用于登录后将最新token动态添加到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)
}
// 拦截返回的数据
service.interceptors.response.use(response => {
// 接下来会在这里进行token过期的逻辑处理
const { code } = response.data
-----------------------------------------------------------
// 说明token过期了,获取新的token
if (code === 401) {
const config = response.config
//判断一下状态
if( !isRefreshing ){
//修改状态 ，进入更新token阶段
isRefreshing = true
// 获取当前的请求
return refreshToken().then(res => {
// 刷新token成功 ，将最新的token更新到header中 ，同时保存在localStorage中
const { token } = res.data
service.setToken(token)
//重置失败请求的配置
config.headers[X-Token] = token
config.baseURL = "
//已经刷新了token ，将所有队列中的请求进行重试
requests.forEach(cb => cb(token))
// 重试完了别忘了清空这个队列
requests = []
return service(config)
}).catch( res=>{
//重新请求token失败 ，跳转到登录页
window.location.href = /login
} ).finally( ()=>{
//完成之后在关闭状态
isRefreshing = false
} )
} else{
// 正在刷新token ，返回一个未执行resolve的promise
return new Promise((resolve) => {
// 将resolve放进队列 ，用一个函数形式来保存 ，等token刷新后直接执行
requests.push((token) => {
config.baseURL =
config.headers[X-Token] = token
resolve(instance(config))
})
})
}
}
--------------------------------------------------------------
return response
}, error => {
return Promise.reject(error)
})
//暴露
export default service
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
