Vue/Antd：处理401错误，自动刷新Token实战

"Vue.js与Ant Design Vue在处理401未授权问题时，通过设置拦截器自动刷新Token" 在Web应用中，尤其是在涉及到用户权限的管理时，401未授权错误通常意味着用户的访问令牌（AccessToken）已过期或无效。Vue.js结合Ant Design Vue(Antd Vue)构建的应用也不例外。为了提供更好的用户体验，开发者通常会实现一种机制，当接收到401错误时自动刷新Token，然后重新发起请求，而无需用户手动登录。以下是一个关于如何在Vue.js中实现这一功能的详细步骤： 1. **通用 Axios 请求封装**： 文件中的`commonRequest`函数是axios的请求封装，它将所有HTTP请求通过axios进行发送。这使得我们可以在一处统一处理请求前后的逻辑，例如添加请求头、处理异常等。 2. **刷新Token的逻辑**： `getNewAccessTokenByRefreshToken`函数用于通过RefreshToken向服务器获取新的AccessToken。通常，当用户首次登录时，服务器会返回两个Token：AccessToken和RefreshToken，AccessToken用于短期验证，而RefreshToken用于长期验证并刷新AccessToken。 3. **全局状态管理**： 在`global.js`中，定义了两个全局变量：`isTokenRefreshing`用于标记当前是否正在进行Token刷新，以及`retryRequestQueues`用于存储因Token过期而需要重试的请求。这样，当Token刷新完成后，可以依次重新发送这些请求。 4. **注册全局变量**： 在`main.js`中，将`global.js`导出的全局变量挂载到Vue的原型链上，使其在应用中可被所有组件访问。 5. **Axios拦截器**： 在`axios-interceptors.js`中，设置axios的响应拦截器。当收到401错误时，拦截器会执行特定的操作，例如调用`logoutAndRedirectToLoginPage`函数，或者尝试刷新Token并重试失败的请求。 6. **处理401错误**： 在响应拦截器中，当收到401错误时，首先检查`isTokenRefreshing`是否为true，如果是，则表示已经在刷新Token，那么将当前请求加入到重试队列；如果不是，则开始尝试刷新Token。刷新过程中，将`isTokenRefreshing`设为true，防止并发的Token刷新请求。 7. **Token刷新成功**： 刷新Token成功后，更新全局的AccessToken，并重新发送重试队列中的请求。同时，重置`isTokenRefreshing`为false。 8. **Token刷新失败**： 如果刷新Token失败，通常会引导用户重新登录，因为这可能意味着RefreshToken也无效，用户需要重新验证身份。 这种机制确保了在用户未感知的情况下，应用能够自动处理Token过期的问题，提高了应用的用户体验。需要注意的是，服务器端也需要配合这种机制，提供刷新Token的API，并且在刷新失败时返回相应的错误信息，以便客户端做出正确处理。