vue数据大屏开发过程中,有客户需要做一个后台来实现数据交互,这里我们选用了lin-cms-koa,但是和lin-cms-koa相匹配的后台不太符合自己的需要,所有vue后台需要自己重新来做了。
在做后台的时候,发现token经常会失效,所以我们需要实现token失效后,刷新token的功能,然后重新请求接口。
这里将axios封装方法记录下
import axios from 'axios';
import { apiBaseUrl } from '@/api/ipConfig.js';
const instance = axios.create({
baseURL: apiBaseUrl,
timeout: 10000,
// 移除全局 Content-Type 设置
});
// 请求拦截器
instance.interceptors.request.use(
config => {
const accessToken = localStorage.getItem('access_token');
if (accessToken) {
config.headers['Authorization'] = `Bearer ${accessToken}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
return response.data; // 返回响应数据
},
async error => {
const originalRequest = error.config;
// 检查是否是 401 或 422 错误,并且不是 /cms/user/login 接口
if ((error.response.status === 401 || error.response.status === 422) &&
!originalRequest._retry &&
!originalRequest.url.includes('/cms/user/login')) {
originalRequest._retry = true; // 防止重复请求
try {
const refreshToken = localStorage.getItem('refresh_token');
// 使用 GET 请求来刷新 token
const response = await axios.get(`${apiBaseUrl}/cms/user/refresh`, {
headers: {
'Authorization': `Bearer ${refreshToken}` // 设置请求头
}
});
// 检查返回的结果
if (response.data && response.data.access_token) {
// 更新 access_token 和 refresh_token
localStorage.setItem('access_token', response.data.access_token);
localStorage.setItem('refresh_token', response.data.refresh_token); // 如果需要更新 refresh_token
return instance(originalRequest); // 重新发送原始请求
} else {
// 刷新 token 失败,处理逻辑
localStorage.removeItem('access_token');
localStorage.removeItem('refresh_token');
window.location.href = '/login'; // 跳转到登录页面
return Promise.reject(error);
}
} catch (err) {
console.error('刷新 token 失败:', err);
localStorage.removeItem('access_token');
localStorage.removeItem('refresh_token');
window.location.href = '/login'; // 跳转到登录页面
return Promise.reject(error);
}
}
return Promise.reject(error); // 其他错误直接拒绝
}
);
export default instance;