elementUI项目中，只弹一个【token过期提示】信息框的处理

关键代码

let msgArr = document.querySelectorAll('.token401Message')
      if (!msgArr.length) {
        Message({
          customClass: 'token401Message',
          message: response.data.msg,
          type: 'error',
          onClose: () => {
            msgArr = []
          }
        })
      }

完整代码

import axios from 'axios'
import { getToken } from '@/libs/util'
import { Message, Loading } from 'element-ui'
import store from '@/store'
import router from '@/router'
let loadingInstance = null // 记录页面中存在的loading
let loadingCount = 0 // 记录当前正在请求的数量
function showLoading(data) {
  if (loadingCount === 0) {
    loadingInstance = Loading.service({
      lock: true,
      background: 'rgba(255,255,255,.6)',
      text: data || ''
    })
  }
  loadingCount++
}

function hideLoading() {
  let timer = setTimeout(() => {
    loadingCount--
    if (loadingInstance && loadingCount === 0) {
      loadingInstance.close()
      loadingInstance = null
      clearTimeout(timer)
      timer = null
    }
  }, 0)
}
const instance = axios.create({
  // baseURL: baseUrl,
  timeout: 0,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  },
  withCredentials: true
})
const no_need_to_refresh_token = [
  '/xxx', // 双因子登录
  '/xxx', // 验证码登录
  '/xxx', // 验证码登录获取验证码
  '/xxx', // 登录接口
  '/xxx', // 获取配置
  '/xxx', // 获取策略
  '/xxx' // 刷新token
]
// 添加请求拦截器
instance.interceptors.request.use(
  async config => {
    if (config.loadingShow) {
      showLoading()
    }
    if (getToken()) {
      config.headers.Authorization = getToken()
      config.headers['Tenant-ID'] = localStorage.getItem('tenantId')
      config.headers['UserId'] = localStorage.getItem('uesrId')
      // 排除双因子 验证码登录 ....
      if (
        no_need_to_refresh_token.every(item => config.url.indexOf(item) === -1)
      ) {
        await store.dispatch('refreshToken')
      }
    }
    return config
  },
  error => {
    if (error.config.loadingShow) {
      hideLoading()
    }
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  async response => {
    if (response.config.loadingShow) {
      hideLoading()
    }
    // token失效
    if (response.data.code === '401 UNAUTHORIZED') {
      router.replace({
        name: 'login',
        params: {
          clear: true
        }
      })
      // 只弹一个【token过期提示】信息框的处理
      let msgArr = document.querySelectorAll('.token401Message')
      if (!msgArr.length) {
        Message({
          customClass: 'token401Message',
          message: response.data.msg,
          type: 'error',
          onClose: () => {
            msgArr = []
          }
        })
      }
      return Promise.reject(new Error(response.data.msg || '请求错误'))
    }
    // 接口报错
    if (
      response.data.code &&
      (response.data.code !== 'SUCCESS' && response.data.code !== 'S1A00000') &&
      response.data.code !== '401 UNAUTHORIZED'
    ) {
      if (!response.request.responseURL.includes('account/verification')) {
        Message({
          message: response.data.msg,
          type: 'error'
        })
        return Promise.reject(new Error(response.data.msg || '请求错误'))
      }
    }
    return response
  },
  async error => {
    if (error.config.loadingShow || error === undefined) {
      hideLoading()
    }
    Message({
      message: error,
      type: 'error'
    })
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

const http = {
  get: (path, data, config) =>
    instance.get(path, {
      params: data,
      ...config
    }),
  delete: (path, data, config) =>
    instance.delete(path, {
      data: data,
      ...config
    }),
  post: (path, data, config) => instance.post(path, data, config),
  put: (path, data, config) => instance.put(path, data, config)
}

export default http