menduner/src/config/axios/service.js

import axios from 'axios'
import Snackbar from '@/plugins/snackbar'
import Confirm from '@/plugins/confirm'
import qs from 'qs'
import { config } from '@/config/axios/config'
import { useUserStore } from '@/store/user'
import { getSuffixAfterPrefix, showNextAction } from '@/utils/prefixUrl'
import { getCurrentLocaleLang } from '@/utils/lang'
import { enterpriseRefreshToken, userRefreshToken } from '@/api/common'
import { getToken, getRefreshToken, setToken, setRefreshToken, getIsEnterprise } from '@/utils/auth'
import { encryptionFun } from '@/utils/openEncryption'
import { rewardEventTrackClick } from '@/api/integral'
import errorCode from './errorCode'
import { useI18n } from '@/hooks/web/useI18n'
import { sendError } from '@/api/Verifition'

import { useSystem } from '@/store/system'

// import { resetRouter } from '@/router'
// import { deleteUserCache } from '@/hooks/web/useCache'

const errorData = []

const { result_code, base_url, request_timeout } = config

// 需要忽略的提示。忽略后，自动 Promise.reject('error')
const ignoreMsgs = [
  '无效的刷新令牌', // 刷新令牌被删除时，不用提示
  'Token 已经过期',
  '刷新令牌已过期' // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
]
// 是否显示重新登录
export const isReLogin = { show: false }
// Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
// 请求队列
let requestList = []
// 是否正在刷新中
let isRefreshToken = false
// 请求白名单，无须token的接口
const whiteList = ['/login', '/refresh-token']
const RETURNED_API = '/admin-api/menduner/reward/event-track/click'

// 规则配置跟踪列表
let requestCompletionTrigger = []
let clickTrigger = []
const getEventList = () => {
  const eventRules = localStorage.getItem('eventList')
  requestCompletionTrigger = (eventRules ? JSON.parse(eventRules) : []).filter(_e => _e.triggerType === '0')
  clickTrigger = (eventRules ? JSON.parse(eventRules) : []).filter(_e => _e.triggerType === '1')
}
getEventList()

// 创建axios实例
const service = axios.create({
  baseURL: base_url, // api 的 base_url
  timeout: request_timeout, // 请求超时时间
  withCredentials: false // 禁用 Cookie 等信息
})

// request拦截器
service.interceptors.request.use(
  async (config) => {
    const userStore = useUserStore()
    config.headers['Accept-Language'] = getCurrentLocaleLang() ?? 'zh_CN'
    config.headers['Login-User-Type'] = 1
    config.showError = config.showError === false ? false : true
    // 是否需要设置 token
    let isToken = (config.headers || {}).isToken === false
    // token类型. api》function中设置tokenIndex（优先）
    const tokenIndex = config.tokenIndex ? config.tokenIndex : getIsEnterprise() ? 1 : 2
    console.log('令牌类型', tokenIndex === 1 ? '企业:' : '个人:', getToken(tokenIndex))
    whiteList.some((v) => {
      if (config.url) {
        config.url.indexOf(v) > -1
        return (isToken = false)
      }
    })
    
    if (getToken(tokenIndex) && !isToken) {
      (config).headers.Authorization = 'Bearer ' + getToken(tokenIndex) // 让每个请求携带自定义token
    }

    // 设置租户
    const tenantId = import.meta.env.VITE_TENANTCODE
    if (tenantId) config.headers['tenant-id'] = tenantId

    const params = config.params || {}
    const data = config.data || false
    if (
      config.method?.toUpperCase() === 'POST' &&
      (config.headers)['Content-Type'] ===
        'application/x-www-form-urlencoded'
    ) {
      config.data = qs.stringify(data)
    }
    // get参数编码
    if (config.method?.toUpperCase() === 'GET' && params) {
      config.params = {}
      const paramsStr = qs.stringify(params, { allowDots: true })
      if (paramsStr) {
        config.url = config.url + '?' + paramsStr
      }
    }

    // 开启参数加密
    if (config.openEncryption) {
      const { getTimeDifference, setTimeDifference, systemInfo } = useSystem()
      const raw = config.url.split('?')[1]
      // const raw = config.encodeParams ? config.url.split('?')[1] : config.url.split('?')[1]
      const body = {
        ...typeof config.data === 'string' ? JSON.parse(config.data) : config.data,
        ...typeof config.params === 'string' ? JSON.parse(config.params) : config.params
      }
      /**
       * header
       * params: { data, params, raw }
       * content
       */
      if (systemInfo.timeDifference === undefined) {
        const _difference = await getTimeDifference()
        setTimeDifference(_difference)
      }
      
      const header = encryptionFun({
        raw,
        body,
        appId: 'web_client',
        AppSecret: 'fa0fc0b5098b974b',
        // timestamp: 1735282548997,
        timestamp: new Date().getTime() + systemInfo.timeDifference,
      })
      const content = {
        data: config.data,
        params: config.params,
        body,
        raw,
        config
        // browserInfo: getBrowserInfo()
      }
      // console.log('加密参数', content)
      errorData.push({
        time: header.timestamp,
        url: config.url,
        content
      })
      Object.assign(config.headers, header)
      // if (config.encodeParams) config.url = config.url.split('?')[0] + '?' + decodeURIComponent(config.url.split('?')[1])
    }
    
    if (isToken) {
      // 截取request url
      const url = getSuffixAfterPrefix(config.url)
      if (url) getEventList()
      if (!url || !clickTrigger.length) return config
      const _obj = clickTrigger.find(e => e.url === url)
      if (_obj) {
        getIntegral(_obj.url, userStore)
      }
    }
    return config
  },
  (error) => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 拦截器
let isConfirmDialogOpen = false
service.interceptors.response.use(
  async (response) => {
    const userStore = useUserStore()
    if (response.config.url.includes(RETURNED_API)) {
      if (!response.data.data || !response.data.data.length) return
      showNextAction(response.data.data)
      return
    }
    const { t } = useI18n()
    let { data } = response
    const config = response.config
    
    if (!data) {
      // 返回“[HTTP]请求没有返回值”;
      throw new Error()
    }
    // 未设置状态码则默认成功状态
    // 二进制数据则直接返回，例如说 Excel 导出
    if (
      response.request.responseType === 'blob' ||
      response.request.responseType === 'arraybuffer'
    ) {
      // 注意：如果导出的响应为 json，说明可能失败了，不直接返回进行下载
      if (response.data.type !== 'application/json') {
        return response.data
      }
      data = await new Response(response.data).json()
    }
    const code = data.code || result_code
    // 获取错误信息
    const msg = data.msg || errorCode[code] || errorCode['default']
    if (ignoreMsgs.indexOf(msg) > -1) {
      // 如果是忽略的错误码，直接返回 msg 异常
      return Promise.reject(msg)
    }
    if (code === 401) {
      // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
      // token类型. api》function中设置tokenIndex（优先）
      const tokenIndex = config.tokenIndex ? config.tokenIndex : getIsEnterprise() ? 1 : 2

      if (!isRefreshToken) {
        isRefreshToken = true
        // 1. 如果获取不到刷新令牌，则只能执行登出操作
        if (!getRefreshToken(tokenIndex)) {
          return handleAuthorized(response)
        }
        // 2. 进行刷新访问令牌
        try {
          // 2.1 刷新成功，则回放队列的请求 + 当前请求
          const refreshApi = tokenIndex === 1  ? enterpriseRefreshToken : userRefreshToken
          const data = await refreshApi(getRefreshToken(tokenIndex))
          // const data = tokenIndex === 1 ? await enterpriseRefreshToken(getRefreshToken()) : await userRefreshToken(getRefreshToken())
          setToken(data.accessToken)
          setRefreshToken(data.refreshToken)

          config.headers.Authorization = 'Bearer ' + getToken(tokenIndex)
          requestList.forEach((cb) => {
            cb()
          })
          requestList = []
          return service(config)
        } catch (e) {
          // console.log(e)
          // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
          // 2.2 刷新失败，只回放队列的请求
          // 刷新失败强制需要退回登录页面 不做队列执行
          // requestList.forEach((cb) => {
          //   cb()
          // })
          // 提示是否要登出。即不回放当前请求！不然会形成递归
          return handleAuthorized(response)
        } finally {
          requestList = []
          isRefreshToken = false
        }
      } else {
        // 添加到队列，等待刷新获取到新的令牌
        return new Promise((resolve) => {
          requestList.push(() => {
            config.headers.Authorization = 'Bearer ' + getToken(tokenIndex) // 让每个请求携带自定义token 请根据实际情况自行修改
            resolve(service(config))
          })
        })
      }
    }
    if (code === 500) {
      if (!isConfirmDialogOpen) {
        isConfirmDialogOpen = true
        Confirm(t('common.confirmTitle'), t('sys.api.errMsg500'), {
          sureText: '查看联系方式',
          cancelCallback: true
        }).then(() => {
          window.open('/contactService')
        }).finally(() => {
          isConfirmDialogOpen = false
        })
      }
      return Promise.reject(new Error(msg))
    }
    if (code === 900 && msg === '重复请求，请稍后重试') {
      console.error('前台打印: 重复请求，请稍后重试')
      return Promise.reject(new Error(msg))
    }
    if (code === 901) {
      Snackbar.error(t('sys.api.errMsg901'))
      return Promise.reject(new Error(msg))
    }
    if ([1100017019, 1100016002, 1100021016, 1100017022, 1100056008, 1100056005].includes(code)) {
      // 1100017019邮箱未注册、1100016002手机号未注册过、1100021016注册企业申请中
      // 未注册过的手机号将code码返回
      return Promise.reject(data)
    }
    // 签名错误
    if (code === 440) {
      const _index = errorData.findIndex(e => e.url === config.url && e.time === +config.headers.timestamp)
      if (_index > -1) {
        const _d = errorData.splice(_index, 1)
        const _item = _d[0]
				// 更新服务器与用户时间差的值
        const { setTimeDifference } = useSystem()
				if (Number(response?.data?.msg)) setTimeDifference(response.data.msg - new Date().getTime())
				// 请求重试
				signErrRetry(config)
        // 提交错误信息
        sendError({ content: JSON.stringify(_item.content), mark: _item.time + '' })
      }
      config.showError = false
    }
    if (code !== 200 && config.showError) {
      Snackbar.error(msg)
      return Promise.reject(msg)
    }
    // 请求成功后触发获取积分
    if (response.config.headers?.Authorization) {
      const url = getSuffixAfterPrefix(response.config.url)
      if (url) getEventList()
      if (!url || !requestCompletionTrigger.length) return data
      const _obj = requestCompletionTrigger.find(e => e.url === url)
      if (_obj) {
        getIntegral(_obj.url, userStore)
      }
    }
    return data
  },
  
  (error) => {
    const { t } = useI18n()
    // console.log('err' + error) // for debug
    let { message } = error
    if (message === 'Network Error') {
      message = t('sys.api.errorMessage')
    } else if (message.includes('timeout')) {
      message = t('sys.api.apiTimeoutMessage')
    } else if (message.includes('Request failed with status code')) {
      message = t('sys.api.apiRequestFailed') + message.substr(message.length - 3)
    }

    if (error.config && error.config.url && error.config.url === '/app-api/menduner/system/auth/weixin/login/authorize/code') {
      console.log(error, '取消请求')
    }
    else Snackbar.error(message)
    return Promise.reject(error)
  }
)

const handleAuthorized = (response) => {
  const { t } = useI18n()
  const user = useUserStore()
  user.handleClearStorage() // 清除缓存

  if (!isReLogin.show) {
    isReLogin.show = true
    Confirm(t('common.confirmTitle'), t('sys.api.timeoutMessage'), {
      cancelCallback: true,
      hideCancelBtn: true // 不能取消
    }).then(() => {
      // resetRouter() // 重置静态路由表
      // deleteUserCache() // 删除用户缓存
      // user.handleClearStorage()
      isReLogin.show = false
      // 干掉token后再走一次路由让它过router.beforeEach的校验
      // location.reload()
      window.location.href = '/login'
    }).catch(() => {
      isReLogin.show = false
    })
  }
  // return Promise.reject(t('sys.api.timeoutMessage'))
}

/**
 * 处理440签名错误
*/
const maxRetries = 2 // 设置签名错误重试请求次数，超出次数弹出错误
const retryDelay = 1000 // 请求延迟
const signErrRetry = (config) => {
	if (config) {
		if (!config?.retryCount) {
			config.retryCount = 0
		}
	
		// 超过重试次数
		if (config.retryCount >= maxRetries) {
      Snackbar.error('网络请求错误！')
      return Promise.reject('签名错误')
		}
		// 重试
		config.retryCount++
		setTimeout(() => {
			return service(config)
		}, retryDelay)
	}
}

// 触发获取积分
const getIntegral = (url, store) => {
  rewardEventTrackClick(url).then(() => {
    setTimeout(() => {
      // store.getEnterpriseUserAccountInfo() 目前企业没有积分，访问商城应该以个人的身份访问商城
      store.getUserAccountInfo()
    }, 2000)
  })
}

// 获取浏览器信息
function getBrowserInfo() {  
  const ua = navigator.userAgent; // 获取用户代理字符串  
  let browserName, fullVersion, majorVersion;  
  // 检测浏览器  

  if (ua.includes("edge")) {
    // edge 浏览器  
    browserName = "Edg";  
    fullVersion = ua.split("Edg/")[1].split(" ")[0];  
  } else if (ua.includes("qqbrowser")) { 
    browserName = 'QQ浏览器';
    fullVersion = ua.split("QQbrowser/")[1].split(" ")[0];  
  } else if (ua.includes("ubrowser")) { 
    browserName = 'UC浏览器';
    fullVersion = ua.split("Ubrowser/")[1].split(" ")[0];  
  } else if (ua.includes("Firefox")) {  
      // Firefox 浏览器  
      browserName = "Firefox";  
      fullVersion = ua.split("Firefox/")[1].split(" ")[0];  
  } else if (ua.includes("Chrome")) {  
      // Chrome 浏览器  
      browserName = "Chrome";  
      fullVersion = ua.split("Chrome/")[1].split(" ")[0];  
  } else if (ua.includes("Safari")) {  
      // Safari 浏览器  
      browserName = "Safari";  
      fullVersion = ua.split("Version/")[1].split(" ")[0];  
  } else if (ua.includes("MSIE") || ua.includes("Trident")) {  
      // Internet Explorer  
      browserName = "Internet Explorer";  
      const version = ua.includes("MSIE") ? ua.split("MSIE ")[1] : ua.split("rv:")[1];  
      fullVersion = version.split(";")[0];  
  } else {  
      browserName = "Unknown";  
      fullVersion = "Unknown";  
  }  

  // 提取主要版本号  
  majorVersion = parseInt(fullVersion.split('.')[0], 10);  

  return {  
      browserName,  
      fullVersion,  
      majorVersion,  
      userAgent: ua,  
  };  
}  
export { service }