/** * 全站http配置 * axios参数说明 * isSerialize是否开启form表单提交 * isToken是否需要token */ import axios from 'axios'; import store from '@/store/'; // Vuex状态管理 import router from '@/router/'; // Vue路由 import { serialize } from 'utils/util'; // 序列化工具函数，通常用于处理请求参数 import { getToken } from 'utils/auth'; // 用于获取存储的Token import { isURL } from 'utils/validate'; // 验证字符串是否为URL的函数 import { ElMessage, ElMessageBox } from 'element-plus'; // Element-Plus中的消息提示组件 import website from '@/config/website'; // 站点配置文件，可以配置一些通用信息如clientId、clientSecret import NProgress from 'nprogress'; // 页面顶部进度条 import 'nprogress/nprogress.css'; // 进度条样式 import { Base64 } from 'js-base64'; // Base64编码工具 import { baseUrl } from '@/config/env'; // API基础URL import crypto from '@/utils/crypto'; // 加密工具，可能用于加密Token等 import { ref } from 'vue'; let msg = ref(''); // 错误信息 let isAlertShowing = false; // 新增的标志变量 // 存储待取消的HTTP请求的键值对，用于取消重复的请求 const pendingRequests = new Map(); // 配置axios默认值 axios.defaults.timeout = 10 * 60000; // 设置超时时间 axios.defaults.validateStatus = status => status >= 200 && status <= 500; // 定义对于给定的HTTP响应状态码是resolve（成功）还是reject（失败） axios.defaults.withCredentials = true; // 表示跨域请求时是否需要使用凭证 // NProgress配置：禁用进度环 NProgress.configure({ showSpinner: false }); // 生成请求的键值，用于跟踪和取消重复的请求 function generateReqKey(config) { const { method, url, params, data } = config; return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&'); } // 添加请求到pendingRequests对象，并创建取消令牌 function addPendingRequest(config) { const requestKey = generateReqKey(config); config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => { if (!pendingRequests.has(requestKey)) { pendingRequests.set(requestKey, cancel); } }); } // 从pendingRequests对象中移除请求，并调用取消操作 function removePendingRequest(config) { const requestKey = generateReqKey(config); if (pendingRequests.has(requestKey)) { const cancel = pendingRequests.get(requestKey); cancel(requestKey); pendingRequests.delete(requestKey); } } //axios请求拦截器 axios.interceptors.request.use( config => { // 检查 config.url 是否以 http 开头 // console.log(config,'config'); // 在请求开始前，对之前的请求做检查取消操作 removePendingRequest(config); // 将当前请求添加到pendingRequests对象中 addPendingRequest(config); // 显示进度条 NProgress.start(); // // 检查URL是否完整，如果不完整或不是URL，则添加baseUrl前缀 if (!isURL(config.url) && !config.url.startsWith(baseUrl)) { config.url = baseUrl + config.url; } // 检查URL是否完整，如果不完整或不是URL，并且不以 /imgapi 开头，则添加 baseUrl 前缀 // if (!isURL(config.url) && !config.url.startsWith(baseUrl) && !config.url.startsWith('/imgapi')) { // config.url = baseUrl + config.url; // } // 添加授权头部（如果请求中没有设置authorization属性为false） const authorization = config.authorization === false; if (!authorization) { config.headers['Authorization'] = `Basic ${Base64.encode( `${website.clientId}:${website.clientSecret}` )}`; } // 如果请求需要token，则在请求头中添加token（除非明确声明不需token） const meta = config.meta || {}; const isToken = meta.isToken === false; const cryptoToken = config.cryptoToken === true; const token = getToken(); if (token && !isToken) { // 如果配置了cryptoToken，则使用加密的Token，否则使用bearer token config.headers[website.tokenHeader] = cryptoToken ? 'crypto ' + crypto.encrypt(token) : 'bearer ' + token; } // 如果配置了text为true，设置文本请求头部 if (config.text === true) { config.headers['Content-Type'] = 'text/plain'; } // 序列化POST请求的数据（如果请求配置了isSerialize） if (config.method === 'post' && meta.isSerialize === true) { config.data = serialize(config.data); } return config; }, error => { // 如果请求失败则结束进度条 NProgress.done(); return Promise.reject(error); } ); //axios响应拦截器 axios.interceptors.response.use( res => { // 隐藏进度条 NProgress.done(); // 移除仍在pendingRequests中的请求 removePendingRequest(res.config); // 获取response中的状态码，优先获取自定义的code，若无则获取HTTP状态码 const status = res.data.code || res.status; // 获取状态码白名单内的状态，这些状态不会被默认处理，而是将控制权交给具体请求 const statusWhiteList = website.statusWhiteList || []; // 取错误消息 let message = res.data.msg || res.data.error_description || '未知错误'; // 如果状态码在白名单中，则直接返回Promise的reject状态 if (statusWhiteList.includes(status)) return Promise.reject(res); console.log(router.currentRoute._value.path, 'router'); // 如果状态码为401，则表示用户未认证，需跳转到登录页 if (status === 401 && !isAlertShowing) { // 如果在登录页面,则表示账号或密码错误 if (router.currentRoute._value.path === '/login') { ElMessage({ message: '账号或密码错误', type: 'warning', }); return; } isAlertShowing = true; // 设置为 true 表示弹窗正在显示 ElMessageBox.alert('长时间未操作,登录已过期，或账号已在别处登录，请重新登录', '提示', { confirmButtonText: '确定', showClose: false, // 不显示关闭按钮 closeOnPressEscape: false, // 禁止通过 ESC 键关闭 closeOnClickModal: false, // 禁止点击遮罩关闭 callback: action => { isAlertShowing = false; // 恢复为 false 表示弹窗已经关闭 store.dispatch('FedLogOut').then(() => router.push({ path: '/login' })); }, }); } // 处理Blob类型的响应 if (res.config.responseType === 'blob') { return handleBlobResponse(res.data) .then(() => res) .catch(error => Promise.reject(error)); } // 如果response的状态码不是200，则显示消息提示，并返回Promise的reject状态 if (status !== 200 && status !== '0' && status !== '1') { if (!msg.value) { ElMessage({ message: message, type: 'error', }); } setTimeout(() => { msg.value = ''; }, 1000); msg.value = message; return Promise.reject(new Error(message)); } // 正常状态返回responseData return res; }, error => { // 隐藏进度条 NProgress.done(); // 移除请求（防止后续的请求无法执行） removePendingRequest(error.config || {}); // 如果是取消请求的错误，则不弹出消息提示 if (axios.isCancel(error)) { console.log('Request canceled', error.message); } else { // 正常请求错误，显示提示消息 ElMessage({ message: error.message, type: 'error', }); } return Promise.reject(error); } ); // 定义一个处理Blob响应的函数，返回一个Promise function handleBlobResponse(blob) { return new Promise((resolve, reject) => { let reader = new FileReader(); // 读取Blob内容为文本 reader.readAsText(blob); reader.onload = function (event) { let text = event.target.result; // 检查文本是否为空 if (!text || text.trim() === '') { console.error('响应内容为空'); ElMessage({ message: '文件导出失败，响应内容为空', type: 'error', }); return reject(new Error('文件导出失败，响应内容为空')); } // 尝试将文本解析为JSON对象 let status = ''; try { status = JSON.parse(text); if (status.code !== 200) { let message = status.msg || status.data.msg; ElMessage({ message: message, type: 'error', }); return reject(new Error(message)); } } catch (e) {} // 如果Blob响应处理成功，则返回resolve resolve(); }; }); } // 导出axios实例 export default axios;