同一浏览器，打开多个系统页面切换账号后，自动刷新页面获取最新账号信息

在开发中，遇到在登录页登录账号A，新窗口打开其他页面，项目中很多操作根据账号信息进行权限限制，这时候，你在首页注销A账号，登录B,之前其他窗口的用户信息依旧是A账号（在不主动刷新页面的情况下），这时候如何解决呢，以下是自己的做法，不足之处敬请指正

1、先在项目中使用cookies保存信息的地方，定义一个值，方便在切换账号后新旧账号进行比较src\utils\auth.js

import Cookies from 'js-cookie'

const IDKey = 'login-id'

export function getId() {
  return Cookies.get(IDKey)
}

export function setId(no) {
  return Cookies.set(IDKey, no)
}

export function removeId() {
  return Cookies.remove(IDKey)
}

2、在登录方法或者获取用户信息方法中，调用方法，进行上面值的保存

\src\store\modules\user.js

import { setId, removeId } from '@/utils/auth'

actions: {
    // 获取用户信息
    GetUserInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        Promise.all([
          getUserInfo(state.token),
          getDictionarys()
        ])
        .then(response => {
          const data = response[0].data
          setId(data.userDto.userId)
          resolve(response[0].data)
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 登出
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token, state.ssoToken).then(() => {
          removeId()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
}

3、在main.js中进行切换页面，自动刷新操作

import Vue from 'vue'


import App from './App'
import router from './router'
import store from './store'
import { getId } from '@/utils/auth'

window.addEventListener('visibilitychange', function() {
	if (document.hidden === false && store.state.user.userId !== getId()) {
		window.location.reload()
	}
})
new Vue({
	el: '#app',
	router,
	store,
	i18n,
	render: h => h(App)
})