vue项目中如何解决出现两次重新登录弹框的问题？

举例描述一下业务场景：当token过期，需要用户重新登录时，需要在页面弹框提示重新登录。

显然这个重新登录的提示弹框的逻辑是在响应拦截器中加的，我的代码如下：（只提供部分代码）

// 返回拦截器
service.interceptors.response.use(
    response => {
        if (response.data.status === -1) {
            Message({
                message: response.data.message,
                type: 'error',
                duration: 3 * 1000
            })
        }
        if (response.headers['content-disposition']) {
            return response
        }
        return response.data
    },
    error => {
        if (error && error.response) {   
            switch (error.response.status) {
                case 401:
                    if (error.response.data.code) {
                        MessageBox.confirm(error.response.data.errors || 'Error', '确定重新登录', {
                            confirmButtonText: '确定',
                            type: 'warning'
                        }).then(() => {
                            store.dispatch('user/resetToken').then(() => {
                                router.push('/login')
                            })
                        })
                    }
                    break;48             }
        } else {
            // error.message = '连接失败...'
        }
        return Promise.reject(error)
    }
)

问题详细描述：当在token过期的页面如果同时发出多个请求时，就会对应出现多个弹框（注意：我这里用的是elementui提供的messageBox，故弹框是在触发确认或取消按钮按照顺序弹出的。）

这样的展示显示用户体验效果不好，当401时应该出现一次弹框，点击确认直接进入登录页，不需要再出现多余的弹框。那这个问题如何修改呢？

解决方法：

加一个全局变量flag，用来标识记录是否触发过messageBox中的按钮。false是未出现过弹框，true代表出现过一次。在做switch匹配前判断flag是否为true，是则中断执行，否则继续执行，执行完messageBox代码后，需要将flag设为true，且需要注意此时还要加个定时器还原flag的初始值为false。因为取消后如果不把flag还原，则不会再出现提示弹框。以下是代码：

 1 let flag = false
// 返回拦截器
service.interceptors.response.use(
   ...
    error => {
        if (error && error.response) {
            if (flag) return
            switch (error.response.status) {
                case 401:
                    if (error.response.data.code) {
                        MessageBox.confirm(error.response.data.errors || 'Error', '确定重新登录', {
                            confirmButtonText: '确定',
                            type: 'warning'
                        }).then(() => {
                            store.dispatch('user/resetToken').then(() => {
                                // location.reload()
                                router.push('/login')
                            })
                        })
　　　　　　　　　　　　　　　　flag = true　　　　　　　　
                        setTimeout(() => {
                            flag = false
                        }, 2000);
                    }
                    break;
                ...
            }
        } else {
            // error.message = '连接失败...'
        }
        return Promise.reject(error)
    }
)