Vue：双token无感刷新

双token无感刷新通常指的是在前后端分离的应用中，后端会发送两个token给前端，一个是访问token（Access Token），用于身份验证；另一个是刷新token（Refresh Token），当Access Token过期时，可以使用Refresh Token去后端请求一个新的Access Token。

以下是一个简单的Vue示例，展示如何实现无感刷新机制：

// 引入axios
import axios from 'axios';
 
// 创建axios实例
const http = axios.create({
  baseURL: 'http://your-api-url', // 替换为你的API地址
  timeout: 10000,
});
 
// 请求拦截器
http.interceptors.request.use(config => {
  // 从本地存储获取refresh token
  const refreshToken = localStorage.getItem('refreshToken');
  if (refreshToken) {
    config.headers['Authorization'] = 'Bearer ' + refreshToken;
  }
  return config;
}, error => {
  return Promise.reject(error);
});
 
// 响应拦截器
http.interceptors.response.use(response => {
  return response;
}, error => {
  const originalRequest = error.config;
  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    // 使用refresh token去请求新的access token
    return http.post('/refresh-token', { refreshToken: localStorage.getItem('refreshToken') })
      .then(response => {
        localStorage.setItem('accessToken', response.data.accessToken);
        // 更新axios实例的header，并再次请求失败的接口
        http.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.accessToken;
        return http(originalRequest);
      });
  }
  return Promise.reject(error);
});
 
export default http;

在这个示例中，我们使用axios创建了一个带有请求拦截器和响应拦截器的HTTP客户端。请求拦截器会检查是否有refresh token，如果有，则在请求头中加入这个token。响应拦截器会检查请求是否返回了401未授权错误，如果是并且原始请求没有重试，则会使用refresh token去请求新的access token，并在成功获取新token后，更新axios实例的header，并重新发送原始请求。

注意：这只是一个简化的示例，实际应用中你需要根据自己的后端API进行相应的调整。例如，refresh token的存储和获取方式、access token的处理方式、以及如何处理refresh token失效的情况等。