logpm_page/src/axios.js

/**
 * 全站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;