vue3 后台axios 实现无感刷新

在 Vue 3 中，结合 Axios 实现“无感刷新”（即无感知的令牌刷新，通常用于在访问令牌过期时自动刷新令牌，而无需用户手动登录）通常涉及以下步骤：

1. 设置拦截器：使用 Axios 的拦截器功能在请求和响应之间添加自定义逻辑。在响应拦截器中，你可以检查返回的 HTTP 状态码，如果状态码表明令牌已过期（例如，401 未授权），则触发令牌刷新流程。
2. 令牌刷新请求：创建一个专门用于刷新令牌的 Axios 请求。当拦截器检测到令牌过期时，它会调用此请求来获取新的令牌。
3. 更新令牌：一旦获得新令牌，更新应用程序中的令牌存储（例如，localStorage、Vuex 等），以便后续请求使用新令牌。
4. 重试原始请求：在成功刷新令牌后，重新发送原始被拦截的请求（此时使用新令牌）。

以下是一个简化的示例代码，展示了如何实现这一过程：

// 创建 Axios 实例
const apiClient = axios.create({
  baseURL: 'https://your-api-url.com',
  // 其他配置...
});

// 响应拦截器
apiClient.interceptors.response.use(response => {
  return response;
}, error => {
  const { response } = error;
  if (response && response.status === 401) {
    return refreshToken().then(refreshed => {
      if (refreshed) {
        // 令牌刷新成功，重试原始请求
        return apiClient.request(error.config);
      } else {
        // 令牌刷新失败，可能需要用户重新登录
        return Promise.reject(error);
      }
    });
  }
  return Promise.reject(error);
});

// 令牌刷新函数
function refreshToken() {
  return apiClient.post('/path/to/refresh', {
    // 刷新令牌所需的参数，例如 refresh_token
  }).then(response => {
    if (response.data.success) {
      // 假设响应数据中包含新的访问令牌
      const newAccessToken = response.data.newAccessToken;
      // 更新令牌存储
      localStorage.setItem('accessToken', newAccessToken);
      // 更新 Axios 实例的 headers，以便后续请求使用新令牌
      apiClient.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
      return true; // 表示刷新成功
    } else {
      return false; // 表示刷新失败
    }
  });
}

在这个示例中，我们为 Axios 实例设置了一个响应拦截器。当响应的 HTTP 状态码为 401 时，我们尝试刷新令牌。如果刷新成功，我们重新发送原始请求；如果刷新失败，我们拒绝该请求的 Promise，以便在应用程序中进行适当的错误处理（例如，提示用户重新登录）。

请注意，这只是一个基本示例。在实际应用中，你可能需要处理更多的细节，如错误处理、并发请求、刷新令牌的安全存储等。此外，确保你的后端服务支持这种令牌刷新机制，并能够正确地处理和响应刷新请求。