axios拦截器只弹一次el-message实现方法

场景说明

同一个账号，两个人使用，第二个人登录成功后，当第一个人再次操作界面时，所有接口返回特定的102码，这时前端知道这个账号异地登录了，现在要做的是让前端给第一个人一个提示，告诉他他的账号被别人使用了。

错误尝试

第一反应是在axios拦截器内实现message弹出操作，实际情况是，第一个人触发102码的时候并不是每次只有一个接口请求，可能会有好几个axios同时请求得到102码，这个时候就会出现下面的场景：

错误代码（简写）

import axios from 'axios'
import {Message} from 'element-ui'
const http = axios.create({
	timeout: 1000 * 60 * 2,
	withCredentials: true
})
// 当为post请求时设置其Content-Type为application/x-www-form-urlencoded
http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 响应拦截
http.interceptors.response.use(res => {
	if (res.data.code === 102) {
		Message({
			message: '当前账号已经在其他客户端登录',
			type: 'warning',
		})
		// 这里执行清除token和跳转到登录页等操作
	｝
)

解决办法

如何解决弹窗多次弹出的问题呢？实际情况下我们只希望它弹一次！

新建一个messageOnce.js文件，如下：

import {Message} from 'element-ui'
// 私有属性，只在当前文件可用
const showMessage = Symbol('showMessage')
export default class domMessage {
	success (options, single = true) {
		this[showMessage]('success', options, single)
	}
	warning(options, single = true) {
		this[showMessage]('warning', options, single)
	}
	info(options, single = true) {
		this[showMessage]('info', options, single)
	}
	error(options, single = true) {
		this[showMessage]('error', options, single)
	}
	[showMessage] (type, options, single) {
		if (single) {
			// 关键代码，判断当前页是否有el-message标签，如果没有则执行弹窗操作
			if (document.getElementsByClassName('el-message').length === 0) {
				Message[type](options)
			}
		} else {
			Message[type](options)
		}
	}
}

在处理响应拦截的文件中引入messageOnce.js，如下：

import axios from 'axios'
import domMessage from './messageOnce'

// new 对象实例
const messageOnce = new domMessage()
const http = axios.create({
	timeout: 1000 * 60 * 2,
	withCredentials: true
})
// 当为post请求时设置其Content-Type为application/x-www-form-urlencoded
http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 响应拦截
http.interceptors.response.use(res => {
	if (res.data.code === 102) {
		messageOnce.warning({
			message: '当前账号已经在其他客户端登录',
			type: 'warning'
		})
		// 这里执行清除token和跳转到登录页等操作
	｝
)

总结

一开始打算使用防抖函数来处理，发现没法解决这个问题，后来向朋友请教，提供了这个思路给我，很受用。如果觉得文章不错，点个赞再走吧！