基于Vue框架的web项目实现同一个浏览器仅能同时登录一个账号的方法

1、同一个浏览器仅能同时登录一个账号的场景

• 基于Vue框架的web项目需要实现同一个浏览器只允许登录一个账号即如果已经在浏览器上登录了用户A在该浏览器上新建一个窗口即新打开一个标签页打开项目登录用户B然后用户A会自动退出。

2、同一个浏览器同时登录多个账号存在的问题

• 因为在同一个浏览器同时登录多个账号很容易造成“同时登录的这几个账号的数据错乱”导致数据不安全。
• 例如如果同一个浏览器允许登录多个账号用户A权限少普通用户登录自己的账号用户B权限多超级管理员在用户A的电脑上同时登录自己的账号用户B使用完后关闭自己的标签页用户A刷新页面后显示的是用户B的账号这样用户A就可以操作用户B账号的内容存在严重的安全隐患。

3、同一个浏览器仅能同时登录一个账号的实现方法

• 通过监听本地存储的字段用户id常用userId表示的变化来确定是否在同一个浏览器同时登录了不同账号。
• 因为userId一定是唯一的如果监听到本地存储的userId的值发生改变则表示在该浏览器有新账户登录即在已经有账户A登录的情况下在该浏览器又登录了一个B账号所以强制账户A退出登录通过让账户A跳转至登录页面实现账户A的退出登录。
• 实现步骤如下

1. 首先在账户A登录成功后在登录页面login.vue页面使用localStorage将userId存储在本地。

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

2. 然后在App.vue里的created方法中监听userId的变化如果监听到userId发生变化就强制旧userId值对应的账户A退出登录。

<template>
	<div>
		<router-view>
		</router-view>
	</div>
</template>
<script>
export default {
	created() {
	    window.addEventListener('storage', res => {
	      	if (res.key === 'userId') {
	        	this.$router.push(`/Login`)
	      	}
	    })
	}
}
</script>

<style>
	@import "../main.css"
</style>