当前位置：首页 > article >正文

Vue.js组件开发-实现无感刷新Token

article 2025/1/5 3:19:48

在Vue.js应用中，实现无感刷新Token涉及到在用户的会话Token即将过期或已经过期时自动获取新的Token，而不影响用户的操作体验。需要通过拦截器（interceptors）来处理API请求，并在检测到Token过期或无效时自动进行刷新。

步骤

‌1.设置Token存储和检测机制‌：

在用户登录成功后，将Token存储在安全的地方（如localStorage或sessionStorage）。
创建一个函数来检测Token是否存在以及是否即将过期。

‌2.配置Axios拦截器‌：

在每个API请求发送之前，使用Axios的请求拦截器来检查Token的状态。
如果Token即将过期或已经过期，先尝试使用刷新Token来获取新的访问Token，然后再继续原始请求。

‌3.处理Token刷新逻辑‌：

创建一个专门的API端点来处理Token刷新。
在拦截器中，如果检测到Token需要刷新，则先发送刷新Token的请求。
在刷新Token成功后，更新存储的Token，并重新发送原始请求。

‌4.错误处理和用户提示‌：

处理刷新Token失败的情况，如刷新Token也过期或无效。
在这种情况下，可能需要提示用户重新登录。

示例：

展示如何在Vue.js中使用Axios拦截器来实现无感刷新Token：

import axios from 'axios';
import store from './store'; // 假设一个Vuex store来管理全局状态

// 创建Axios实例
const api = axios.create({
  baseURL: 'https://your-api-endpoint.com',
});

// 请求拦截器
api.interceptors.request.use(
  config => {
    // 获取存储的Token
    const token = store.state.token;
    if (token) {
      // 将Token添加到请求头中
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 检查Token是否需要刷新（这里只是一个示例，需要根据自己的逻辑来判断）
    if (isTokenExpiringSoon(token)) {
      return refreshToken().then(newToken => {
        // 更新存储的Token
        store.commit('updateToken', newToken);
        // 重新设置请求头中的Token
        config.headers.Authorization = `Bearer ${newToken}`;
        // 返回配置对象以继续请求
        return config;
      });
    }
    // 如果Token不需要刷新，则直接返回配置对象
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器（可选，用于处理全局响应错误）
api.interceptors.response.use(
  response => {
    // 处理响应数据
    return response;
  },
  error => {
    // 检查是否是Token无效导致的错误
    if (error.response && error.response.status === 401) {
      // 如果是，则尝试刷新Token并重试请求（这里需要额外的逻辑来处理重试）
      // ...
    }
    // 返回错误对象
    return Promise.reject(error);
  }
);

// 检查Token是否即将过期的函数（需要根据自己的Token结构来实现）
function isTokenExpiringSoon(token) {
  // ...
  return false; // 示例返回值，实际需要根据逻辑判断
}

// 刷新Token的函数
function refreshToken() {
  return api.post('/refresh-token', {
    // 发送刷新Token请求所需的数据（如刷新Token）
  }).then(response => {
    // 假设响应中包含新的Token
    return response.data.newToken;
  });
}

export default api;