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

2024-06-30 18:39| 来源: 网络整理| 查看: 265

摸鱼了摸一天，看了下电脑右下角的时间，哇，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 如果页面不被认为是隐藏的

【本文地址】

公司简介

联系我们