项目场景:

  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: {}
}
  1. 登录页面 login.vue
// 引入
import global from '@/assets/js/common'
// 登录成功时将用户信息存储到localStorage和全局变量golbal中
// 这里才是登录成功的时候去赋值,创建 username这个变量
   global.username = this.form.username
// 同时也要做的是将这个用户username存进localStorag
  localStorage.setItem('passUserName', this.form.username)
  1. 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永远都是我们设的初始值
})
Logo

前往低代码交流专区

更多推荐