vue单页中同一浏览器同时只允许登录一个账号的解决办法

项目场景：

1. 用户名是唯一的
2. 窗口1已经登录了用户A，管理员角色
3. 当窗口2去到登录页面，并且登录了用户B，普通用户
4. 窗口1界面用户信息未刷新，界面显示的任然用户A的信息
5. 需求：窗口1界面用户信息需要刷新显示，即：显示用户B的信息

问题描述：

1. 窗口1已经成功登录了用户A，管理员角色
2. 复制窗口1页面路由，再打开窗口2，点击退出登录按钮，浏览器路由跳转至登录页
3. 输入用户B，普通用户角色，点击登录按钮，用户B成功登录
4. 点击至窗口1,窗口1显示的登录用户是用户A
5. 此时localStorage和vuex中存储的用户信息已经是用户B的信息，但是窗口1的界面的用户信息未刷新

---

解决方案：

解决思路可参考： （vue单页）同一浏览器只允许登录一个账号的解决办法

1. common.js

export default {
  global: {}
}

2. 登录页面 login.vue

// 引入
import global from '@/assets/js/common'
// 登录成功时将用户信息存储到localStorage和全局变量golbal中
// 这里才是登录成功的时候去赋值，创建 username这个变量
   global.username = this.form.username
// 同时也要做的是将这个用户username存进localStorag
  localStorage.setItem('passUserName', this.form.username)

3. main.js

// 这个方法是监测浏览器窗口发生变化的时候执行
window.addEventListener('visibilitychange', function () {
  if (document.hidden === false && global.username !== localStorage.getItem('username')) {
    // 只有当初始创建的username不等于localStorage里面的userId的时候去覆盖掉这个username的值并且需要先刷新浏览器窗口
    // 原生JS提供的方法
    window.location.reload()  
    global.username = localStorage.getItem('username')
  } else {
    global.username = localStorage.getItem('username')
  }
  // 不覆盖的话username永远都是我们设的初始值
})