摸鱼了摸一天,看了下电脑右下角的时间,哇,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');
浏览器标签页被隐藏或显示的时候会触发visibilitychange事件,通过addEventListener进行监听,而document的hidden属性返回一个布尔值,指示该页面是否被视为隐藏。这是一个只读属性。
var bool = document.hidden;
//true 如果页面被认为是隐藏的。
//false 如果页面不被认为是隐藏的