双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失效的情况等。