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

关键代码

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

完整代码

javascript 复制代码
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
相关推荐
「、皓子~6 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了8 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_10 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术25 分钟前
京东小程序JS API仓颉改造实践
前端
奋飛34 分钟前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟35 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游38 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte43 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js