同一个浏览器不同窗口登录不同账号，窗口切换时，页面刷新账号变更为最后一次登录的账号

摸鱼了摸一天，看了下电脑右下角的时间，哇，18:30！终于到了下班的时间！下班！！
然而在我拔掉插座，正将电脑装包时，领导向我这边走来了。。。
我心里一咯噔，完犊子，有任务要安排啊这是，于是，皮笑肉不笑地问领导啥事，，领导和蔼可亲的说，小段啊，咱们现在这个系统呢，有个地方需要优化下，我心里嘀咕，这系统的bug多了去了，大家心里都有数好吧，什么优化不就是改bug嘛，还拐弯抹角的，真的是。
只好问，是哪里需要优化呢，z总。领导说，是这样的，比如说吧，业务人员先是使用超级管理员账号登录进入系统，然后在浏览器又新开一个窗口，使用客服管理员账号进入这个系统，最后在切换到之前的超级管理员账号窗口时，页面显示的角色还是超级管理员，而不是客服管理员。。。我就说，一般不都这样吗，实在不行，你让他在刷新一下页面不就行了呗？
然而领导说，我是这样想的，窗口切换的同时，你做个提示，然后账号角色也跟着切换，这样会好点，你抽个时间搞定吧，应该不难，加油！
我心想，哎呦卧槽，看来是躲不掉了，那就想办法解决吧，我回去想了想，这应该是需要监听下浏览器窗口的变化和账号的变化，然后是location.reload()进行页面刷新，
然后去百度了下，说是最好在main.js进行窗口的监听，应为main.js里面是用不了this，所以通过Vue.prototype对elemntUi的confirm方法进行调用

上一波效果图（ps:可能gif图看着这个系统有些丑，其实很不错的，只不过屏幕截取太大，视频转的gif会更大，所以我尽可能的屏幕截小一点，嘿嘿）

main.js代码大致如下

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//同一个浏览器在另一个窗口登录另一个账号，窗口切换时页面刷新，同时账号改为最后一次登录的账号
window.addEventListener("visibilitychange", function () {
    // console.log(store.state.user.user.id)  //vuex里面保存的账号id
    // console.log(JSON.parse(localStorage.getItem("user")).id); //登录时的账号id
    if (document.hidden === false && store.state.user.user.id !== JSON.parse(localStorage.getItem("user")).id) {
        Vue.prototype.$confirm('该账户已注销，点击确定按钮刷新页面', '提示', { type: 'warning', showCancelButton: false, showClose: false, }).then(() => {
            window.location.reload();
        }).catch(e => {
            Vue.prototype.$message.error(e.message);
        });
    }
})
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件，通过addEventListener进行监听，而document的hidden属性返回一个布尔值，指示该页面是否被视为隐藏。这是一个只读属性。

var bool = document.hidden;
//true 如果页面被认为是隐藏的。
//false 如果页面不被认为是隐藏的
1
2
3