Token过期处理

Posted 2023-03-17

参考技术A Token用于进行接口鉴权，但是Token具有由后端设置的过期时间，当Token过期以后，就无法再请求数据了
项目中后端设置的过期时间为24h，测试时我们可以手动修改token值让Token失效
处理方式：

我们观察前面的功能的话，接口的响应信息中是有三个和token相关的信息的

响应拦截器 会在响应接收完毕，在对应请求处理前被拦截器拦截，响应拦截器参数response中保存了相应的信息

那么我们接来下将响应拦截器设置到utils/request.js中，将axios更改为创建的request（因为我们使用了ESLint规范，记得去除所有的分号）

错误处理 ，需要在拦截器中找到特定的错误情况进行token刷新
当出现错误时，通过Elemnt的Message组件设置提示，这里我们采用的是引入方式操作

HTTP 状态码401表示未授权，导致401的情况有：

首先要检测store是否有user信息（有就证明是正常登陆，一定存在的有refresh_token），如果存在的有refresh_token的话就请求新的access_token，需要用到对应的刷新 接口 ，接下来检查是否有新的access_token

如果页面中存在多个请求（大多数页面中都不会只有一次请求），如果Token过期，每个请求都会刷新Token，这个时候刷新多次都没有意义，又增加了请求个数，还会出现额外的问题

通过浏览器的开发者工具观察，有两次的刷新Token请求，由于两次的刷新token携带的refresh_token相同，会导致一次成功一次失败，失败的那一次会导致页面跳转请求页

虽然刷新Token的问题解决了，但是之前发送的两个请求只有一个成功执行，其他的请求都被阻止了
如何解决？
我们声明一个数组存储所有被挂起的请求，当Token刷新完毕再将这些请求重新发送

解决