axios无痛刷新token：前后端配合与实现策略

本文主要介绍了如何在前端使用Axios库实现无痛刷新token的功能，以确保用户在登录后，当token过期时能够自动获取新token而无需用户察觉。需求背景是前端在发送请求前需要检查token的有效性，如果过期，则先调用refreshToken接口获取新token，然后重新发送请求。 实现方法分为两种： 1. 请求前拦截（Method 1） - 在axios的interceptors.request.use()方法中，预先拦截每个请求，通过读取localStorage中的token并检查其有效期。如果发现token已过期，将当前请求挂起，然后发送一个新的请求到refreshToken接口获取新token，获取成功后再继续原请求。这种方法的优点是可以节省流量，但需要后端支持提供token的有效时间信息，并且依赖于客户端的本地时间，可能存在时间不一致导致的校验失败风险。 2. 请求后拦截（Method 2） - 不在请求前拦截，而是通过axios.interceptors.response.use()方法，处理返回的响应数据。请求发送后，如果返回的状态码表明token已过期，这时才调用refreshToken接口并重新发送请求。这种方法不需要额外的token过期字段，但会导致每次请求都可能包含两次网络通信，增加了流量消耗。 博主最终选择了Method 2，因为它相对简单，避免了本地时间篡改可能带来的问题，尽管这可能会增加一次请求次数。为了实现这一功能，作者会创建一个axios的基础骨架，包括从localStorage读取token，以及在response拦截器中处理token过期的情况。 具体实现步骤包括： - 引入axios库 - 定义函数从localStorage获取token - 使用axios.interceptors设置请求和响应拦截器 - 在响应拦截器中检查token有效性，如过期则刷新token并重新发送请求 通过这种方式，前端能够优雅地处理token的刷新，提供了一个无痛的用户体验，即使在并发请求的情况下也能确保token的有效性。