「经典题」Vue中处理token过期问题_service.interceptors.response.use

后端为了安全，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