2026-01-26 17:00:12 +08:00
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
import { ElMessage } from 'element-plus'
|
2026-02-04 13:30:07 +08:00
|
|
|
|
import { useUserStore } from '@/stores/user' // 引入 Store 获取 Token
|
2026-01-26 17:00:12 +08:00
|
|
|
|
|
|
|
|
|
|
// 1. 创建 axios 实例
|
|
|
|
|
|
const service = axios.create({
|
2026-02-04 13:30:07 +08:00
|
|
|
|
// 【关键修改】
|
|
|
|
|
|
// 设置为 '/api',请求会自动拼接成 http://localhost:5173/api/...
|
|
|
|
|
|
// 然后被 Vite 代理转发到 http://127.0.0.1:8000/api/...
|
|
|
|
|
|
baseURL: '/api',
|
2026-01-27 15:50:23 +08:00
|
|
|
|
timeout: 5000
|
2026-01-26 17:00:12 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
2026-02-04 13:30:07 +08:00
|
|
|
|
// 2. 请求拦截器
|
2026-01-26 17:00:12 +08:00
|
|
|
|
service.interceptors.request.use(
|
|
|
|
|
|
(config) => {
|
2026-02-04 13:30:07 +08:00
|
|
|
|
// 在发送请求之前做些什么
|
|
|
|
|
|
// 注意:这里需要确保 Pinia 已经初始化,但在拦截器运行时组件早已加载,通常没问题
|
|
|
|
|
|
// 为了安全起见,也可以直接读 localStorage,或者在函数内调用 store
|
|
|
|
|
|
const token = localStorage.getItem('token')
|
|
|
|
|
|
|
|
|
|
|
|
if (token && config.headers) {
|
|
|
|
|
|
// Flask-JWT-Extended 默认需要 'Bearer <token>' 格式
|
|
|
|
|
|
config.headers['Authorization'] = 'Bearer ' + token
|
|
|
|
|
|
}
|
2026-01-26 17:00:12 +08:00
|
|
|
|
return config
|
|
|
|
|
|
},
|
|
|
|
|
|
(error) => {
|
|
|
|
|
|
return Promise.reject(error)
|
|
|
|
|
|
}
|
|
|
|
|
|
)
|
|
|
|
|
|
|
2026-02-04 13:30:07 +08:00
|
|
|
|
// 3. 响应拦截器
|
2026-01-26 17:00:12 +08:00
|
|
|
|
service.interceptors.response.use(
|
|
|
|
|
|
(response) => {
|
2026-02-04 13:30:07 +08:00
|
|
|
|
// Axios 默认包了一层 data,所以这里取 response.data
|
2026-01-26 17:00:12 +08:00
|
|
|
|
const res = response.data
|
2026-02-04 13:30:07 +08:00
|
|
|
|
|
|
|
|
|
|
// 如果后端返回的是标准 Flask jsonify 结果,通常没有 code 字段(除非你自己封装了)
|
|
|
|
|
|
// 如果你使用了标准 HTTP 状态码(200, 201等),Axios 会直接进入这里
|
|
|
|
|
|
|
|
|
|
|
|
// 只有当业务逻辑明确返回错误码时才报错 (根据你的后端封装调整)
|
2026-01-26 17:00:12 +08:00
|
|
|
|
if (res.code && res.code !== 200) {
|
|
|
|
|
|
ElMessage.error(res.msg || 'Error')
|
|
|
|
|
|
return Promise.reject(new Error(res.msg || 'Error'))
|
|
|
|
|
|
} else {
|
2026-02-04 13:30:07 +08:00
|
|
|
|
return res // 返回解包后的数据
|
2026-01-26 17:00:12 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
(error) => {
|
2026-02-04 13:30:07 +08:00
|
|
|
|
console.log('err: ' + error) // for debug
|
|
|
|
|
|
let message = error.message || '请求失败'
|
|
|
|
|
|
|
|
|
|
|
|
// 处理 HTTP 状态码错误
|
|
|
|
|
|
if (error.response) {
|
|
|
|
|
|
const status = error.response.status
|
|
|
|
|
|
const data = error.response.data
|
|
|
|
|
|
|
|
|
|
|
|
if (status === 401) {
|
|
|
|
|
|
message = '登录已过期,请重新登录'
|
|
|
|
|
|
// 这里可以触发登出逻辑
|
|
|
|
|
|
localStorage.clear()
|
|
|
|
|
|
window.location.href = '/login'
|
|
|
|
|
|
} else if (status === 403) {
|
|
|
|
|
|
message = '权限不足'
|
|
|
|
|
|
} else if (status === 404) {
|
|
|
|
|
|
message = '请求的资源不存在'
|
|
|
|
|
|
} else if (status === 500) {
|
|
|
|
|
|
message = '服务器内部错误'
|
|
|
|
|
|
} else if (data && data.msg) {
|
|
|
|
|
|
// 优先显示后端返回的错误信息
|
|
|
|
|
|
message = data.msg
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
ElMessage.error(message)
|
2026-01-26 17:00:12 +08:00
|
|
|
|
return Promise.reject(error)
|
|
|
|
|
|
}
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
export default service
|