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