xlb-main-login/src/utils/request.js

``` yarn install ```

import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs'
import store from '@/store'

import { VueAxios } from './axios'
import Notification from 'ant-design-vue/es/notification'
import Modal from 'ant-design-vue/es/modal'
import Message from 'ant-design-vue/es/message'
import { ACCESS_TOKEN } from '@/store/mutation-types'

const vm = new Vue()
//免token接口
const NoTokenApi = [
  '/api/demo-user-role/oauth/register',
  '/api/demo-user-role/oauth/login',
  '/api/demo-user-role/oauth/phone/login',
  '/api/demo-user-role/oauth/code',
  '/api/demo-user-role/oauth/code/tel',
  '/api/demo-user-role/oauth/reset',
  '/api/demo-user-role/v2/front/source',
  '/api/demo-user-role/captcha/get',
  '/api/demo-user-role/captcha/check',
]
// '/api/demo-user-role/oauth/logout',

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_API_ROOT,
  timeout: 180000, // 请求超时时间 180s
  ignoreError: false, // 忽略200服务器返回失败，不提示
  transformRequest: [
    function (data, headers) {
      if (headers['Content-Type']) {
        if (headers['Content-Type'] === 'multipart/form-data') {
          return data
        } else if (headers['Content-Type'].includes('application/json')) {
          return JSON.stringify(data)
        }
      }
      // 对 data 进行任意转换处理
      return Qs.stringify(data, { indices: false })
    },
  ],
  transformResponse: [
    function (data) {
      return JSON.parse(data.startsWith('while') ? data.substr(9) : data) // 处理JSON劫持
    },
  ],
})

const CancelToken = axios.CancelToken
let unauthorizedConfirm = null // 会话失效确认框

const err = (error) => {
  if (axios.isCancel(error)) {
    return new Promise(() => {})
  }
  if (error.response) {
    switch (error.response.status) {
      case 500:
        Notification.error({
          key: 'Error',
          message: '错误',
          description: '系统错误，请重新尝试',
        })
        break
      case 403:
        Notification.error({
          key: 'Forbidden',
          message: '无权限访问',
          description: ((error.response || {}).data || {}).message || '您无权访问该页面',
        })
        break
      case 401:
        if (!unauthorizedConfirm && error.response.data && error.response.data.error === 'invalid_token') {
          Vue.ls.clear()
          window.localStorage.clear()
          window.sessionStorage.clear()
          unauthorizedConfirm = Modal.warning({
            title: '登录过期',
            content: '您的登录已过期，请重新登录',
            onOk() {
              unauthorizedConfirm = null
              window.location.reload()
            },
          })
        } else {
          if (error.response.data.msg || error.response.data.message) {
            const content = error.response.data.msg || error.response.data.message
            Message.warning({
              content,
            })
          }
        }
        break
      default:
        if (error.response.data.msg || error.response.data.message) {
          // 商城去接入弹窗
          const ShopInfo = [72000]
          const shopConfirm = sessionStorage.getItem('shopInfo') // 商城弹窗确认框
          if (ShopInfo.includes(error.response.data.code)) {
            if (shopConfirm !== 1) {
              sessionStorage.setItem('shopInfo', 1)
              vm.$xlbShop({ show: true })
              return
            }
            sessionStorage.removeItem('shopInfo')
          }
          // 企业微信接入错误码
          const errCode = [50159,100002001,100006003]
          if (!errCode.includes(error.response.data.code)) {
            const content = error.response.data.msg || error.response.data.message
            const NOPushArr = ['empty', '企业微信未配置，请接入企业微信', '尚未扫码']
            if (!NOPushArr.includes(content)) {
              Message.warning({
                content,
              })
            }
          }
        }
        break
    }
  }
  return Promise.reject(error)
}

// request interceptor
service.interceptors.request.use(
  (config) => {
    //去除不需要token的方法
    const noNeedToken = NoTokenApi.includes(config.url)
    if (process.env.NODE_ENV == 'development') {
      if (config.url.indexOf('?') !== -1) {
        config.url = config.url.slice(0, config.url.indexOf('?'))
      }
      config.params = {}
    }
    if (!noNeedToken) {
      const token = window.sessionStorage.getItem('access_token') || Vue.ls.get(ACCESS_TOKEN)
      if (token) {
        config.headers.common['Authorization'] = 'Bearer ' + token // 让每个请求携带自定义 token 也可以使用cookie
      }
      if (!config.daemon) {
        // 存储非守护请求的取消函数
        config.cancelToken = new CancelToken((cancel) => {
          store.state.requestCancels.push(cancel)
        })
      }
    }

    return config
  },
  (err) => Promise.reject(err)
)

// response interceptor
service.interceptors.response.use((response) => {
  const responseData = response.data
  if (responseData) {
    responseData.headers = response.headers
    return responseData
  }
}, err)

const installer = {
  vm: {},
  install(Vue) {
    Vue.use(VueAxios, service)
  },
}

// 取消请求
const cancelRequests = () => {
  store.state.requestCancels.forEach((cancel) => {
    cancel && cancel()
  })
  store.state.requestCancels = []
}

export { installer as VueAxios, service as axios, cancelRequests }