vue同一浏览器登陆多账号处理

背景

项目在线上会遇到管理员类似权限比较大的用户，会在同一浏览器登陆多个账号。由于后端是通过cookie识别，此时cookie已经是最新登陆账号信息。管理员有可能切换tab至之前页面，此时页面显示还是之前信息，当修改信息，提交请求时，其实后端是按照最新登陆用户进行信息处理的。这种情况下，容易误导用户，造成错误的信息修改。

解决

前端种个cookie，监听页面tab切换事件，通过接口返回的id与cookie中的id对比，若不一致，则提示用户刷新页面，页面重新渲染，展示的就是最新登陆用户的信息了

具体实现

store.js

// 装js-cookie种cookie
import Cookies from 'js-cookie';
// 每次登录的时候，通过接口获取当前登录账号的LoginName
getLoginName() {
        return api
            .getLoginName()
            .then((res) => {
                if (res.status === 0) {
                // 这里通过vuex存下来 在app.vue里使用（项目本身已使用vuex 没有的话可以参考vue组件通信）
                commit('RECORD_LOGIN_NAME', res.loginName);
                // 拿到结果，存到cookie里
                	this.loginName = res.loginName
                    Cookies.set('loginName', res.loginName);
                }
            })
            .catch((e) => {
                return false;
            });
    },

app.vue
在入口页添加监听页面tab切换的事件

export default{
    data () {
        return {
            isConfirmShow: false,
        };
    },
    methods: {
        checkNameExpired() {
            // this.loginName：接口请求获取name的存下来
            const loginName_cookie = Cookie.get('loginName');
            if (this.loginName !== loginName_cookie && !this.isConfirmShow) {
                this.isConfirmShow = true;
                // 这里样式可以根据项目优化
                alert(`已登录${loginName_cookie}，点击 “确定” 刷新本页面。`);
                window.location.reload();
            	this.isConfirmShow = false;
            }
        }
    },
    mounted() {
        document.addEventListener('visibilitychange', this.checkNameExpired);
    },
    beforeDestroy() {
        document.removeEventListener('visibilitychange', this.checkNameExpired);
    }
};