后端配置
- 设置Token过期时间：在后端（如服务器或网关）配置access_token和refresh_token的过期时间。通常，access_token的过期时间较短，而refresh_token的过期时间较长。
- 提供刷新Token接口：后端需要提供一个接口，用于接收前端发送的refresh_token并返回新的access_token和refresh_token
前端实现
1. 安装Axios：首先，确保在Vue项目中安装了Axios库，用于发送HTTP请求。
npm install axios2. 创建Axios实例：在Vue项目中创建一个Axios实例，并配置基础URL等参数。
import axios from 'axios';const instance = axios.create({baseURL: '/api', // 后端接口的基础URLtimeout: 10000, // 请求超时时间
});3. 添加请求拦截器：在Axios实例中添加请求拦截器，用于在每次请求前判断是否需要添加token。
instance.interceptors.request.use(config => {const accessToken = localStorage.getItem('access_token'); // 从本地存储中获取access_tokenif (accessToken) {config.headers.Authorization = `Bearer ${accessToken}`; // 设置请求头中的Authorization字段}return config;},error => {return Promise.reject(error);}
);4. 添加响应拦截器：在Axios实例中添加响应拦截器，用于处理后端返回的响应数据。当access_token过期时（通常返回401状态码），自动使用refresh_token刷新access_token，并重新发送原始请求。
let isRefreshing = false; // 标记是否正在刷新token
let pendingRequests = []; // 存储待重发的请求instance.interceptors.response.use(async response => {if (response.data && response.data.code === 401) {// access_token过期，尝试使用refresh_token刷新if (!isRefreshing) {isRefreshing = true;try {const refreshToken = localStorage.getItem('refresh_token'); // 从本地存储中获取refresh_tokenconst res = await axios.post('/api/refresh-token', { refresh_token: refreshToken }); // 发送刷新token请求const newAccessToken = res.data.access_token; // 获取新的access_tokenlocalStorage.setItem('access_token', newAccessToken); // 存储新的access_token到本地存储// 重发待重发的请求pendingRequests.forEach(({ config, resolve }) => {config.headers.Authorization = `Bearer ${newAccessToken}`; // 更新请求头中的Authorization字段resolve(instance(config)); // 重新发送请求});pendingRequests = []; // 清空待重发的请求队列} catch (error) {// 刷新token失败，处理错误（如跳转到登录页面）console.error('Failed to refresh token', error);// 根据项目需求，可能需要进行其他错误处理，如清除本地存储、重置路由等} finally {isRefreshing = false; // 无论成功还是失败，都标记为不再刷新token}// 注意：由于此时已经刷新了token并重发了请求，因此不需要再返回原始的401响应给调用者// 可以选择返回一个特定的响应或者抛出一个错误，根据实际需求决定return Promise.reject(new Error('Token refreshed and request retried'));} else {// 如果已经在刷新token，则将当前请求加入待重发的请求队列return new Promise((resolve) => {pendingRequests.push({ config, resolve });});}}return response;},error => {return Promise.reject(error);}
);5. 使用Axios实例发送请求：在Vue组件或Vuex等地方使用创建的Axios实例发送请求，即可实现token的无感刷新。
// 在Vue组件中发送请求
instance.get('/api/some-endpoint').then(response => {// 处理响应数据console.log(response.data);}).catch(error => {// 处理请求错误（如网络错误、服务器错误等）console.error('Request error', error);});通过以上步骤，您就可以在Vue 2项目中实现token的无感刷新了。请注意，这只是一个基本的实现示例，具体实现可能需要根据项目的实际需求进行调整和优化。