vue单页中同一浏览器同时只允许登录一个账号的解决办法
common.jsexport default {global: {}}登录页面 login.vue// 引入import global from '@/assets/js/common'// 登录成功时将用户信息存储到localStorage和全局变量golbal中// 这里才是登录成功的时候去赋值,创建 username这个变量global.username = this.form.usern
·
项目场景:
- 用户名是唯一的
- 窗口1已经登录了用户A,管理员角色
- 当窗口2去到登录页面,并且登录了用户B,普通用户
- 窗口1界面用户信息未刷新,界面显示的任然用户A的信息
- 需求:窗口1界面用户信息需要刷新显示,即:显示用户B的信息
问题描述:
- 窗口1已经成功登录了用户A,管理员角色
- 复制窗口1页面路由,再打开窗口2,点击退出登录按钮,浏览器路由跳转至登录页
- 输入用户B,普通用户角色,点击登录按钮,用户B成功登录
- 点击至窗口1,窗口1显示的登录用户是用户A
- 此时localStorage和vuex中存储的用户信息已经是用户B的信息,但是窗口1的界面的用户信息未刷新
解决方案:
解决思路可参考: (vue单页)同一浏览器只允许登录一个账号的解决办法
- common.js
export default {
global: {}
}
- 登录页面 login.vue
// 引入
import global from '@/assets/js/common'
// 登录成功时将用户信息存储到localStorage和全局变量golbal中
// 这里才是登录成功的时候去赋值,创建 username这个变量
global.username = this.form.username
// 同时也要做的是将这个用户username存进localStorag
localStorage.setItem('passUserName', this.form.username)
- 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永远都是我们设的初始值
})
更多推荐
已为社区贡献3条内容
所有评论(0)