基于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>