Vue项目中实现无感Token刷新的示例

import axios from 'axios'; import store from '@/store'; // 假设我们将 token 保存在 Vuex 中 import router from '@/router'; 
const apiClient = axios.create({
 baseURL: process.env.VUE_APP_API_BASE_URL,
 timeout: 10000 
});
 // 请求拦截器，携带 token 
apiClient.interceptors.request.use( config => 
{ const accessToken = store.getters['auth/accessToken']; 
if (accessToken) 
{ config.headers['Authorization'] = `Bearer ${accessToken}`; }
 return config; 
}, error => { 
return Promise.reject(error); }
 ); 
// 响应拦截器，检查 token 是否过期
 apiClient.interceptors.response.use( response => { return response; },
 async error => { const originalRequest = error.config; 
const refreshToken = store.getters['auth/refreshToken']; 
// 检查是否是认证错误（如 401） 
if (error.response.status === 401 && !originalRequest._retry && refreshToken) { originalRequest._retry = true; 
// 尝试使用刷新令牌获取新的访问令牌 
try { const response = await axios.post('/auth/refresh', { token: refreshToken });
 const newAccessToken = response.data.accessToken; 
// 更新存储中的 token store.commit('auth/SET_ACCESS_TOKEN', newAccessToken); 
// 重新发起之前失败的请求 
originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`; 
return apiClient(originalRequest); } 
catch (refreshError) { 
// 刷新失败，跳转到登录页面 
store.commit('auth/LOGOUT');
 router.push('/login'); } } 
return Promise.reject(error); } ); 
export default apiClient;

// store/modules/auth.js
 const state = { accessToken: localStorage.getItem('accessToken') || '', refreshToken: localStorage.getItem('refreshToken') || '' }; 
const getters = { accessToken: state => state.accessToken, 
refreshToken: state => state.refreshToken }; 
const mutations = { 
SET_ACCESS_TOKEN(state, token) { state.accessToken = token; 
localStorage.setItem('accessToken', token); }, 
SET_REFRESH_TOKEN(state, token) { state.refreshToken = token;
 localStorage.setItem('refreshToken', token); }, 
LOGOUT(state) { state.accessToken = ''; 
state.refreshToken = ''; 
localStorage.removeItem('accessToken'); 
localStorage.removeItem('refreshToken'); } };
 export default { state, getters, mutations };