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

news/2025/1/20 3:24:56/

关键代码 

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 = nullclearTimeout(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.ppmy.cn/news/1564568.html

相关文章

使用 Python 实现自动化办公(邮件、Excel)

目录 一、Python 自动化办公的准备工作 1.1 安装必要的库 1.2 设置邮件服务 二、邮件自动化处理 2.1 发送邮件 示例代码 注意事项 2.2 接收和读取邮件 示例代码 三、Excel 自动化处理 3.1 读取和写入 Excel 文件 示例代码 3.2 数据处理和分析 示例代码 四、综合…

微信小程序:实现单选,多选,通过变量控制单选/多选

一、实现单选功能 微信小程序提供了 radio 组件来实现单选功能。radio 组件需要配合 radio-group 使用。 1. WXML 代码 <radio-group bindchange"onRadioChange"><label wx:for"{{items}}" wx:key"id"><radio value"{{it…

昇腾环境ppstreuct部署问题记录

测试代码 我是在华为昇腾910B3上测试的PPStructure。 import os import cv2 from PIL import Image #from paddleocr import PPStructure,draw_structure_result,save_structure_res from paddleocr_asyncio import PPStructuretable_engine PPStructure(show_logTrue, imag…

[Easy] leetcode-14 最长公共前缀

一、题目描述 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 ""。 输入&#xff1a;strs ["flower","flow","flight"] 输出&#xff1a;"fl"输入&#xff1a;strs [&qu…

springCloudGateway+nacos自定义负载均衡-通过IP隔离开发环境

先说一下想法&#xff0c;小公司开发项目&#xff0c;参考若依框架使用的spring-cloud-starter-gateway和spring-cloud-starter-alibaba-nacos, 用到了nacos的配置中心和注册中心&#xff0c;有多个模块&#xff08;每个模块都是一个服务&#xff09;。 想本地开发&#xff0c;…

Asp .Net Core 实现微服务:集成 Ocelot+Nacos+Swagger+Cors实现网关、服务注册、服务发现

什么是 Ocelot ? Ocelot是一个开源的ASP.NET Core微服务网关&#xff0c;它提供了API网关所需的所有功能&#xff0c;如路由、认证、限流、监控等。 Ocelot是一个简单、灵活且功能强大的API网关&#xff0c;它可以与现有的服务集成&#xff0c;并帮助您保护、监控和扩展您的…

Gradio Tunneling 支持固定域名啦

这里是视频 实用的内网穿透小工具更新了&#xff0c;这次可以给个固定域名了 的笔记。 项目地址&#xff1a;https://github.com/arkohut/gradio-tunneling 之前我介绍过一个小工具 gradio-tunneling&#xff0c;它可以让非 gradio 创建的服务也使用 gradio 的 --share 功能。…

消息队列实战指南:三大MQ 与 Kafka 适用场景全解析

前言&#xff1a;在当今数字化时代&#xff0c;分布式系统和大数据处理变得愈发普遍&#xff0c;消息队列作为其中的关键组件&#xff0c;承担着系统解耦、异步通信、流量削峰等重要职责。ActiveMQ、RabbitMQ、RocketMQ 和 Kafka 作为市场上极具代表性的消息队列产品&#xff0…