同一浏览器只允许登录一个账号
前言
在Vue
项目中,要实现的一个需求是,在浏览器上已经登录了用户A
,在该浏览器上新建一个窗口打开项目,登录用户B
,然后将用户A
顶掉,也就是实现同一浏览器只允许登录一个账号的功能,因为,如果同一个浏览器允许登录多个账号的话,很容易造成数据错乱,更有可能造成的问题时,用户A
(权限少)登录自己的账号,用户B
(权限多)在用户A
的电脑上同时登录了自己的账号,用户B
使用完后关闭自己的标签页,用户A
刷新页面后,显示的是用户B
的账号,这样用户A
就可以操作用户B
账号的内容,这样显然是会有安全隐患的。
实现过程
通过监听本地存储的一个字段的变化,来确定不同的账号,比如用户id
,这个用户id
一定是唯一的,那么监听到这个用户id
的值发生改变,那就意味着,当前登录的一定是不同的账号,接着我们只要强制使其退出登录,跳转至登录页面即可,也就是说,首先登录用户A
,然后在新的页面登录用户B
,这样就强制用户A
的页面强制退出登录,跳转到登录页面,实现步骤如下所示:
1.首先,在登录成功后,将用户id
存储在本地。
2.然后在App.vue
里的created
方法里监听userid
的变化,如果有触发变化,就强制退出登录。
版权声明: 本文为 InfoQ 作者【brave heart】的原创文章。
原文链接:【http://xie.infoq.cn/article/5c1398251781ce80048b18889】。文章转载请联系作者。
评论