一、场景描述

        在实际开发过程中，我们都需要对401（身份认证过期）进行处理，并使其跳转登录页。但是我们在身份认证过期时刷新页面，此时所在页面如果存在有多个请求同时发送，那么就会出现一次弹窗多次消息提示的情况，极大的影响用户体验。

二、解决思路

        对element message进行二次封装。

        三种实现方式：

        1、在封装方法中对当前弹窗状态进行记录，如果当前存在弹窗，则调用element message的close方法进行关闭，随后再触发新的弹窗出现。（问题：同一时间段内，较早生成的弹窗在关闭中和新生成的弹窗出现时会造成“闪动效果”）

        2、在封装方法中获取message消息弹窗的DOM元素，判断其是否为undefined，如果值不为undefined，则“生成弹窗”，否则不做任何处理。（问题：永远出现的是同一时间内的首个弹窗）。

        3、在已有项目中进行优化升级时发现无论是方式一还是方式二，都必须采用this.$message.error/success这种方式调用，和element官网中的使用方式相比缺少了多样化和灵活性，因此在第二中方式的基础上进行升级：使用function定义message主要内容并赋值给某个变量，并为它添加可直接调用的方法。

三、代码实现

        方式一：        

// message.js

import { Message } from 'element-ui'
let messageStatus = null
export default class ShowMessage {
  success (options) {
    this.message('success', options)
  }

  warning (options) {
    this.message('warning', options)
  }

  info (options) {
    this.message('info', options)
  }

  error (options) {
    this.message('error', options)
  }

  message (type, options) {
    if (messageStatus) {
      messageStatus.close()
    }
    messageStatus = Message[type](options)
  }
}

        方式二：

// message.js
import { Message } from 'element-ui'

export default class ShowMessage {
  success (options) {
    this.message('success', options)
  }

  warning (options) {
    this.message('warning', options)
  }

  info (options) {
    this.message('info', options)
  }

  error (options) {
    this.message('error', options)
  }

  message (type, options) {
    const messageDom = document.getElementsByClassName('el-message')[0]
    if (messageDom === undefined) {
      Message[type](options)
    }
  }
}

// main.js

import ShowMessage from '@/config/message';

Vue.prototype.$message = new ShowMessage();

        方式三

// message.js
import { Message } from 'element-ui'
 const showMessage = function (options) {
    const messageDom = document.getElementsByClassName('el-message')[0]
    if (messageDom === undefined) {
      Message(options)
    }
 }
const arr = ['success', 'warning', 'info', 'error']
arr.forEach(type => {
  showMessage[type] = options => {
    const messageDom = document.getElementsByClassName('el-message')[0]
    if (messageDom === undefined) {
      Message[type](options)
    }
  };
});
export default showMessage;