当前位置: 首页 > article >正文

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


http://www.kler.cn/a/504658.html

相关文章:

  • replaceState和vue的router.replace删除query参数的区别
  • Python的秘密基地--[章节11] Python 性能优化与多线程编程
  • 【C】初阶数据结构3 -- 单链表
  • 企业服务-团队协作相关平台极简介绍
  • IDEA的Java注释在Toggle Rendered View下的字号调整方式
  • [0405].第05节:搭建Redis主从架构
  • Vue中nextTick实现原理
  • 鸿蒙心路旅程:HarmonyOS NEXT 心路旅程:技术、成长与未来
  • 探索文本相似性算法:解锁文本比对的奥秘
  • 数据结构-ArrayLIst-一起探索顺序表的底层实现
  • 二手车交易系统的设计与实现(代码+数据库+LW)
  • 抖音ip属地没有手机卡会显示吗
  • sql Server服务区cpu占用率高,原因分析
  • 【基于轻量型架构的WEB开发】课程 实验一 mybatis操作 Java EE企业级应用开发教程 Spring+SpringMVC+MyBatis
  • Java爬虫——使用Spark进行数据清晰
  • UnityDots学习(二)
  • Vue computed属性原理及其惰性求值特点
  • ros2-6.4.4 两轮差速控制机器人(问题解决)
  • 集成学习算法
  • RabbitMQ确保消息可靠性
  • LSTM火灾温度预测(Pytorch版本)
  • 【JavaScript】基础内容,HTML如何引用JavaScript, JS 常用的数据类型
  • Ubuntu创建AndroidStudio快捷启动图标
  • HTML拖拽功能(纯html5+JS实现)
  • 极限竞速 地平线5“d3dx12_43.dll”文件丢失或错误导致游戏运行异常如何解决?windows系统DLL文件修复方法
  • 智汇云舟参编《城市轨道交通安全防范系统技术要求》国标正式发布