vue2中实现token的无感刷新

后端配置

1. 设置Token过期时间：在后端（如服务器或网关）配置access_token和refresh_token的过期时间。通常，access_token的过期时间较短，而refresh_token的过期时间较长。
2. 提供刷新Token接口：后端需要提供一个接口，用于接收前端发送的refresh_token并返回新的access_token和refresh_token

前端实现 

1. 安装Axios：首先，确保在Vue项目中安装了Axios库，用于发送HTTP请求。

npm install axios

2. 创建Axios实例：在Vue项目中创建一个Axios实例，并配置基础URL等参数。

import axios from 'axios';

const instance = axios.create({
  baseURL: '/api', // 后端接口的基础URL
  timeout: 10000, // 请求超时时间
});

 3. 添加请求拦截器：在Axios实例中添加请求拦截器，用于在每次请求前判断是否需要添加token。

instance.interceptors.request.use(
  config => {
    const accessToken = localStorage.getItem('access_token'); // 从本地存储中获取access_token
    if (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_token
          const res = await axios.post('/api/refresh-token', { refresh_token: refreshToken }); // 发送刷新token请求
          const newAccessToken = res.data.access_token; // 获取新的access_token
          localStorage.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的无感刷新了。请注意，这只是一个基本的实现示例，具体实现可能需要根据项目的实际需求进行调整和优化。

原文地址：https://blog.csdn.net/weixin_53541596/article/details/143886557

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！