dromara/ujcms-cp Axios拦截器配置与优化
项目地址: https://gitcode.com/dromara/ujcms-cp 痛点：企业级应用中的HTTP请求管理难题
在企业级内容管理系统开发中，HTTP请求管理一直是开发者面临的重大挑战。你是否遇到过以下问题？
- 重复的认证令牌处理逻辑散落在各个API模块中
- 错误处理不一致，用户体验参差不齐
- 会话超时后用户操作无响应，需要手动刷新页面
- 缺乏统一的请求日志和性能监控
- 多站点环境下权限管理复杂
ujcms-cp通过精心设计的Axios拦截器架构，为企业级应用提供了完整的HTTP请求解决方案。
核心拦截器架构解析
请求拦截器配置
service.interceptors.request.use(
(config) => {
setAccessAt(Date.now());
config.headers = {
...config.headers,
...getAuthHeaders(),
...getSiteHeaders()
};
return config;
},
(error) => Promise.reject(error),
);
功能特性：
- 自动注入认证令牌（Bearer Token）
- 多站点支持的头信息管理
- 请求时间戳记录，用于会话管理
响应拦截器错误处理
service.interceptors.response.use(
(response) => response,
(e) => {
const { response: { data, status, statusText } } = e;
if (data) {
handleError(data);
return Promise.reject(data.error);
}
handleError({ status });
return Promise.reject(statusText);
},
);
错误处理机制深度剖析
错误类型分类处理
认证令牌管理策略
export const getAuthHeaders = (): any => {
const accessToken = getAccessToken();
return { Authorization: accessToken ? `Bearer ${accessToken}` : '' };
};
// Cookie-based token存储
const JWT_ACCESS_TOKEN = 'jwt-access-token';
const JWT_REFRESH_TOKEN = 'jwt-refresh-token';
安全特性：
- Bearer Token认证机制
- Cookie安全存储
- 自动令牌刷新支持
- 会话超时检测
性能优化实践
请求超时配置
const service = axios.create({
baseURL: import.meta.env.VITE_BASE_API,
timeout: 30000, // 30秒超时
});
并发请求管理
| 场景 | 策略 | 超时时间 | 重试机制 |
|---|---|---|---|
| 普通API请求 | 直接请求 | 30s | 无 |
| 文件上传 | 分片上传 | 无限制 | 3次 |
| 重要配置获取 | 优先级高 | 10s | 2次 |
| 实时数据更新 | 短轮询 | 5s | 无 |
多环境适配方案
环境变量配置
// Vite环境变量
const baseURL = import.meta.env.VITE_BASE_API;
// 多环境支持
const envConfig = {
development: 'http://localhost:8080',
production: 'https://api.example.com',
staging: 'https://staging-api.example.com'
};
站点头信息管理
export const getSiteHeaders = (): any => {
const currentSiteStore = useCurrentSiteStore();
return {
'X-Site-Id': currentSiteStore.currentSiteId
};
};
最佳实践指南
1. 统一的API调用模式
// 标准GET请求
export const queryModelList = async (params?: Record<string, any>): Promise<any> =>
(await axios.get('/backend/core/model', { params })).data;
// 标准POST请求
export const createModel = async (data: Record<string, any>): Promise<any> =>
(await axios.post('/backend/core/model', data)).data;
2. 错误处理标准化
export const handleError = (errorInfo: ErrorInfo): void => {
const { exception, status, message } = errorInfo;
if (exception === 'SiteForbiddenException') {
// 站点权限处理
useCurrentSiteStore().setCurrentSiteId(null);
window.location.reload();
} else if (status === 401) {
// 认证过期处理
removeAccessToken();
removeRefreshToken();
showMessageBox();
}
// ... 其他错误处理
};
3. 会话管理优化
const showMessageBox = () => {
const appState = useAppStateStore();
if (!appState.loginBoxDisplay && !appState.messageBoxDisplay) {
window.location.reload();
}
};
监控与调试技巧
请求日志记录
// 开发环境请求日志
if (import.meta.env.DEV) {
service.interceptors.request.use((config) => {
console.log('🚀 请求发出:', config.method?.toUpperCase(), config.url);
return config;
});
service.interceptors.response.use((response) => {
console.log('✅ 请求成功:', response.status, response.config.url);
return response;
});
}
性能监控指标
| 指标 | 正常范围 | 警告阈值 | 异常阈值 |
|---|---|---|---|
| 请求成功率 | >99% | 95%-99% | <95% |
| 平均响应时间 | <500ms | 500ms-1s | >1s |
| 超时请求比例 | <1% | 1%-5% | >5% |
扩展与自定义
自定义拦截器示例
// 添加请求ID追踪
service.interceptors.request.use((config) => {
config.headers['X-Request-ID'] = generateRequestId();
return config;
});
// 响应时间监控
service.interceptors.response.use((response) => {
const duration = Date.now() - response.config.metadata.startTime;
monitorRequestDuration(response.config.url, duration);
return response;
});
插件化架构设计
总结与展望
ujcms-cp的Axios拦截器配置体现了现代前端架构的最佳实践：
- 统一性：所有HTTP请求通过统一的拦截器管道
- 可维护性：模块化的错误处理和认证逻辑
- 可扩展性：插件化架构支持自定义拦截器
- 用户体验：智能的错误提示和会话管理
通过这套拦截器体系，开发者可以：
- 减少重复代码，提高开发效率
- 确保应用的安全性和稳定性
- 提供一致的用户体验
- 便于监控和调试
未来可以进一步优化：
- 请求缓存策略
- 离线请求队列
- 更精细的性能监控
- AI驱动的错误预测和处理
这套拦截器配置不仅是技术实现，更是工程思维的体现，值得每一个企业级应用开发者学习和借鉴。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
