Vue2.x使用Element组件登录过期多次弹窗问题
一、问题
-
Vue
2.x版本使用Element
组件库中message
消息提示组件时会出现当前用户登录失效时,接口返回非成功的code
,在响应拦截中进行抛错处理导致出现多次弹窗的问题,如下所示:
-
出现的原因,后端进行身份过期的判断,当过期时请求接口参数
code
为非200,前端响应拦截时做了统一错误抛出处理,代码如下:import ElementUI from 'element-ui' Vue.use(ElementUI) ... // 响应拦截 axios.interceptors.response.use(res => { if (res.data.code && res.data.code != 200) { if (res.data.code == 1500 || res.data.code == 401) { sessionStorage.clear() router.push({ path: "/login" }) } ElementUI.Message({ type: "error", message: res.data.msg }) } return res })
二、解决
-
解决方法分为两种:
-
第一种(推荐):设置一个状态参数
status
,用于拦截当前code
为非200的响应数据,以此解决多次弹窗的问题,代码如下:import ElementUI from 'element-ui' Vue.use(ElementUI) ... // 响应拦截 // 用于拦截code!=200的响应数据 let status = true; axios.interceptors.response.use(res => { if (res.data.code && res.data.code != 200 && status) { if (res.data.code == 1500 || res.data.code == 401) { sessionStorage.clear() router.push({ path: "/login" }) } status = false; ElementUI.Message({ type: "error", message: res.data.msg }) let timeout = setTimeout(() => { status = true; clearTimeout(timeout); }, 1500) } return res })
-
第二种(不推荐):重写组件
message
的方法进行优化,这里可以新建一个工具函数utils.js
,里面写重置组件message
的方法,之后在main.js
中进行引入使用即可,这里需要注意,挂载自定义组件message
必须放在Vue.use(ElementUI)
的后面,才可以覆盖Element
组件默认的message
,代码如下:// utils.js代码 import { Message } from 'element-ui'; let messageInstance = null; const resetMessage = (options) => { if(messageInstance) { messageInstance.close() } messageInstance = Message(options) }; ['error','success','info','warning'].forEach(type => { resetMessage[type] = options => { if(typeof options === 'string') { options = { message:options } } options.type = type return resetMessage(options) } }) export const message = resetMessage // main.js代码 Vue.use(ElementUI) import { message } from '../utils.js' Vue.prototype.$message = message ... // 响应拦截 axios.interceptors.response.use(res => { if (res.data.code && res.data.code != 200) { if (res.data.code == 1500 || res.data.code == 401) { sessionStorage.clear() router.push({ path: "/login" }) } message({ type: "error", message: res.data.msg }) } return res })
到此问题就都解决了,如果有更好的解决方法欢迎补充讨论!🌈