后端为了安全,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 = 'https://www.atool.online/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 = 'https://www.atool.online/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 = 'https://www.atool.online/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 = 'https://www.atool.online/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
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。