Vue2.x使用Element组件登录过期多次弹窗问题

Vue2.x使用Element组件登录过期多次弹窗问题

一、问题

• Vue2.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
  })
  

到此问题就都解决了，如果有更好的解决方法欢迎补充讨论！🌈