vue下axios拦截器token刷新机制的实例代码

//创建http.js文件，以下是具体代码： //引入安装的axios插件 import axios from 'axios' import router from '@/router'; import Vue from 'vue' const qs = require("qs"); let _this = new Vue(); let isLock = false; let refreshSubscribers = []; //判断token是否过期 function isTokenExpired(token) { let expires_time = JSON.parse(token) 在Vue.js应用中，使用axios库进行HTTP请求是常见的做法。为了增强安全性并处理认证问题，通常会使用JWT（JSON Web Token）作为身份验证机制。JWT包含了一个过期时间（expiration time），当这个时间到达时，用户需要重新登录。然而，通过实现axios拦截器，可以实现在令牌即将过期时自动刷新令牌，而无需中断用户的操作流程。 在给定的代码中，创建了一个名为`http.js`的文件，其中定义了axios拦截器来处理token的刷新。以下是关键知识点的详细说明： 1. **axios拦截器**：axios拦截器允许我们在请求发送前或响应接收后添加额外的操作。在本例中，有两个拦截器，一个用于处理请求（`request.interceptors`），另一个用于处理响应（`response.interceptors`）。 2. **token过期检查**：`isTokenExpired`函数用于判断当前的token是否已过期。它解析存储在本地存储（localStorage）中的token，比较其`expires_time`与当前时间。如果当前时间大于等于`expires_time`，则返回`true`表示token过期。 3. **订阅机制**：`refreshSubscribers`数组用于保存那些因token过期而被挂起的请求。当新token获取成功后，这些请求会被重新执行，使用新token进行数据请求。 4. **刷新token**：当检测到token即将过期时，`refreshToken`函数会被调用。它使用旧的refresh_token向服务器发送POST请求，请求新的access_token。在成功获取新token后，更新localStorage中的token，并将新的Authorization头设置为新token，然后继续原请求。 5. **错误处理**：如果刷新token失败或收到错误状态码（例如，登录状态已失效），则清除localStorage中的token，提示用户重新登录，并重定向到登录页面。 6. **全局axios配置**：`request`函数封装了axios的基本请求逻辑，包括设置请求方法、URL、数据和头部等。它使用`newOptions`参数来构建axios请求配置，并通过`resolve`和`reject`回调来处理请求的成功或失败。 7. **拦截器注册**：在`http.js`文件中，未显示的部分应该是如何注册这两个拦截器。通常，你会在Vue实例的`created`或`mounted`生命周期钩子中设置它们，确保在应用启动时，拦截器已经生效。 这个示例展示了如何在Vue应用中优雅地处理JWT的自动刷新，保证了用户体验的连续性。通过这样的机制，即使token过期，应用也能在后台无感知地完成刷新过程，只有在刷新失败时才会强制用户重新登录。这种方式对于需要持续在线交互的应用非常有用。