axios利用Promise刷新token实战

"本文介绍了如何利用axios和Promise无痛刷新token的实现方法，主要涉及两种不同的策略：请求前拦截和响应后拦截。文章通过具体的代码示例详细解释了这两种方法的优缺点，并选择了响应后拦截的方法进行实现。" 在前端开发中，与服务器交互时，token的管理是一个重要的环节。`axios`是一个常用的JavaScript库，用于处理HTTP请求。当用户的token过期时，通常需要刷新token以保持会话状态。为了确保用户体验，我们需要在刷新token的过程中尽量减少对用户的影响，这就是所谓的“无痛刷新”。 文章提出的两个主要实现思路： 1. 请求前拦截：在每个请求发送前，检查token是否过期。如果过期，先发起刷新token的请求，获取新token后再继续原请求。这种方法的优点是减少了不必要的网络请求，但缺点是依赖于本地时间的准确性，可能存在本地时间篡改导致的拦截失败风险。 2. 响应后拦截：先发送请求，当服务器返回提示token过期时，再刷新token并自动重试请求。这种方法简单直接，但会增加一次网络请求。 考虑到实际应用中，用户篡改本地时间的情况较少，作者选择了响应后拦截的方法，使用`axios.interceptors.response.use()`来处理。这种方式可以避免因时间判断错误导致的问题，但在某些情况下可能会多消耗一次请求。 以下是一个简单的axios响应拦截器实现token刷新的示例： ```javascript axios.interceptors.response.use( response => { // 如果请求成功，直接返回响应 return response; }, error => { if (error.response.status === 401) { // 当状态码为401，表示未授权，可能是因为token过期 return new Promise((resolve, reject) => { // 发送刷新token的请求 refreshToken().then(newToken => { // 存储新token，并更新axios配置 saveToken(newToken); axios.defaults.headers.common['Authorization'] = 'Bearer ' + newToken; // 用新token重试原请求 axios(error.config).then(resolve).catch(reject); }).catch(() => { // 刷新token失败，处理错误，例如跳转到登录页 handleTokenRefreshFailure(); }); }); } else { // 其他错误，直接抛出 return Promise.reject(error); } } ); ``` 在这个示例中，`refreshToken()`函数负责发送刷新token的请求，成功后返回新的token。`saveToken()`函数用于存储新token，可能是保存在localStorage或cookie中。`axios.defaults.headers.common['Authorization']`设置为新token，确保后续请求带有新token。如果刷新token失败，`handleTokenRefreshFailure()`函数会处理这种情况，比如提示用户重新登录。 通过响应拦截器，我们可以优雅地处理token过期的情况，确保用户在大部分时间里不会感知到这种异常，从而提高应用的用户体验。