同一浏览器只允许登录一个账号

用户头像
brave heart
关注
发布于: 2020 年 06 月 02 日
同一浏览器只允许登录一个账号

前言

Vue项目中,要实现的一个需求是,在浏览器上已经登录了用户A,在该浏览器上新建一个窗口打开项目,登录用户B,然后将用户A顶掉,也就是实现同一浏览器只允许登录一个账号的功能,因为,如果同一个浏览器允许登录多个账号的话,很容易造成数据错乱,更有可能造成的问题时,用户A(权限少)登录自己的账号,用户B(权限多)在用户A的电脑上同时登录了自己的账号,用户B使用完后关闭自己的标签页,用户A刷新页面后,显示的是用户B的账号,这样用户A就可以操作用户B账号的内容,这样显然是会有安全隐患的。



实现过程

通过监听本地存储的一个字段的变化,来确定不同的账号,比如用户id,这个用户id一定是唯一的,那么监听到这个用户id的值发生改变,那就意味着,当前登录的一定是不同的账号,接着我们只要强制使其退出登录,跳转至登录页面即可,也就是说,首先登录用户A,然后在新的页面登录用户B,这样就强制用户A的页面强制退出登录,跳转到登录页面,实现步骤如下所示: 

1.首先,在登录成功后,将用户id存储在本地。

localStorage.setItem('userid',userInfo.userid)

2.然后在App.vue里的created方法里监听userid的变化,如果有触发变化,就强制退出登录。

created() {
window.addEventListener('storage', res => {
if (res.key === 'userid') {
this.$router.push('/Login')
}
})
}



发布于: 2020 年 06 月 02 日阅读数: 162
用户头像

brave heart

关注

唯一不变的是变化本身。 2018.04.17 加入

🗡 她只唱只想这首止战之殇。

评论

发布
暂无评论
同一浏览器只允许登录一个账号