背景： 后端设计token 过期时间是四个小时，但有一个用户总是挂着账号，然后就投诉了好几次，账号明明登录着为啥就让我重新登录， 说什么token过期，哎 对客户来说 这个确实是个难以忍受的 bug算是吧。

想起来大学的时候学过 软件测试。什么是bug。bug就是没有达到需求的都可以叫做是bug 当时可能有点广泛哈。🤔

有点扯远了其实这个问题 我们可以理清下思路哈

1. 首先并发请求 肯定不至于 每一个都需要去刷新token 只需要第一个知道过期的那个请求去刷新就可以。
   这个时候需要我们怎么做呢？就是搞一个闸门，一旦有一个去刷新接口就 把闸门关闭。什么时候刷新完成 什么时候关闭
   这个可以通过一个变量去控制

let isFreshToken = true // 默认是打开

2. 之前发送的没有去刷新token的请求 我们还得缓存下来，等token 刷新完成之后 还得重新执行下 这些请求

let casheRequests = [];   // 请求队列

有的童鞋可能会问， 那我之前的那些请求的参数去那里拿呢， 其实这个问题 axios的请求拦截和响应拦截的。config 中就已经给我们保存好了这些参数，我们只需要更换下 token即可

再其次就是我们 可以通过两种方式判断过期

1. 判断token时间有没有过期，有的话 直接去刷新token
2. 后端返回告诉我们token 过期

但是这两种 用的处理方案都是一样的。 我这里就是使用的第二种，在
axios的响应拦截中。由于后端告诉我们 token 过期了 我才去刷新 token

代码实现步骤

这里需要写一写常用的封装axios的一些东西

1. 简单封装axios 请求

let isFreshToken = true // 是否刷新token 默认是打开
let casheRequests = [];   // 请求队列
const request = axios.create({baseURL: apiUrl,  // 这里写的是你们的接口地址timeout: 10000,headers: {Accept: 'application/json, text/plain, */*','Content-Type': 'application/x-www-form-urlencoded'},responseType: 'json'})
request.defaults.headers['token'] = localStorage.getItem('token')

2. 然后就是响应拦截的设置了

// 响应拦截
request.interceptors.response.use(res => {const { data, status, config } = res;if(status == 200) { // 请求状态成功if(data.Code == 4441) { // token过期if(isFreshToken) {//token可以刷新 一次并发只能有一个刷新isFreshToken = false; // 把开关关闭// 刷新token 是一个 返回promise的请求接口的方法 这个是自定义的 看你们自己的项目来定reFreshToken().then(result => {isFreshToken = true // 方法重新打开let token = result.token； // 拿到新的token// 重新赋值tokenlocalStorage.setItem('token', token);// 重新执行 之前缓存的方法数组 使用最新的tokencasheRequests.forEach(cb => cb(token))// 重置为空 降缓存的请求方法casheRequests = []// 然后重新执行本次的方法config.headers['token']= token // 使用最新的tokenreturn request(config); })//} else {// token 正在刷新中 其他的请求先放在队列中return new Promise(resolve => {// 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行casheRequests.push((token) => {config.headers['token']= tokenresolve(request(config))})})}}return data}
}

大概的思路就是这样的呢， 但还会有点瑕疵， 哎怎么说呢。

心里心外谁来言，花开花落又一年
关注我 持续更新前端知识

不管是热爱也好工作也罢， 程序员还是要热爱生活的，好好爱自己。 写了这么多博客 也有点疲倦了，可能热情过后彼此过后都会疲倦吧。