vue同一浏览器只允许同时登录一个账号的解决办法-真实项目使用

上篇文章介绍了：同一浏览器只允许同时登录一个账号的解决办法
这篇文章记录下项目中确定的最终方案。

场景：同一浏览器，登陆账号A后，打开新的tab标签页，登陆账号B，用户A将会强制返回登陆页面；
这个场景应该很多前端小伙伴会遇到的，下面将分享下我项目中实际使用的方法；
逻辑思路： A用户登陆成功后，记录token或者id，存储到local或者cookies，同步提交token或id数据到vuex中。新的标签页，登陆用户B，拿B的token与A用户vuex中的toekn做对比，不一致，则将A强制回登陆页面。在App.vue文件使用 document.addEventListener(‘visibilitychange’, function(){}j监听打开新的tab标签页

登陆页：

 loginValidate() {this.$refs['loginForm'].validate(async valid => {if (valid) {this.loading = truetry {const res = await login({loginForm }))if (res?.data) {// 存储token到cookiesthis.setToken(res.data.AuthToken)//设置token数据给到vuexthis.$store.commit('token/setTokenInfo', res.data.AuthToken)}} catch (error) {}} else {return false}})}setToken(token: string) {Cookies.set('yi-token', token)}

store/modules/token.js
注意：这里给state中的tokenInfo设置了默认值：cookies中的token，避免用户点击浏览器刷新按钮vuex数据会丢失的问题。这个处理真的太绝了，因为项目中还有一项业务逻辑：点击按打开新的tab标签页查看报告，vuex中需仍然带token的。
（vuex数据会丢失的两种情况：1，点击浏览器刷新按钮；2，打开新的tab标签页；）

import Cookies from 'js-cookie'
export default {namespaced: true,state: {tokenInfo: Cookies.get('yishi-token'),},mutations: {setTokenInfo(state, data) {state.tokenInfo = data}},actions: {},getters: {}
}

app.vue文件：

 created() {// 浏览器打开新的tab页，登录其他用户，当前用户强制退出document.addEventListener('visibilitychange', function () {if (store.state.token.tokenInfo != Cookies.get('yi-token')) {router.push({ name: 'login' })}})}

vue同一浏览器只允许同时登录一个账号的解决办法-真实项目使用相关推荐

运行Chromium浏览器缺少google api密钥无法登录谷歌账号的解决办法
每次打开 Chromium,地址栏下方就会提示 "缺少 Google API 密钥,因此 Chromium 的部分功能将无法使用".提示不仅很烦人,并且还无法在 Chromium ...
苹果电脑连linux密码错误,Mac系统登录不进系统解决办法
1.找到买苹果电脑时附带的 Mac OS X 系统光盘,或者有苹果 Mac OS X 系统镜像的 U 盘/移动硬盘,塞入光驱(或插在 USB /火线接口上).重启苹果电脑,开机时按住"opt ...
csgo 直连服务器,csgo你只可以从大厅连接此服务器解决办法
csgo你只可以从大厅连接此服务器解决办法: 请完成以下步骤刷新您的 Steam 设置: 您注销并完全退出 Steam . 请打开 Internet Explore.Safari 或 Firefox ...
RVCT远程登录时报错的解决办法
目录(?)[-] RVCT远程登录时报错的解决办法关于RVDS40破解中出现Cannot obtain license的解决办法 Cannot obtain license for Compiler ...
fckeditor2.63 上传图片的一个问题的解决办法
fckeditor2.63 上传图片的一个问题的解决办法: 问题描述: 图片上传成功,但滚动条还处于滚动状态,也没有弹出"上传成功"的消息(本地测试no problems,uplo ...
vue.js 引用背景图 background 无效的3种解决办法
#vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下: ...
SSH 登录速度慢的解决办法
SSH登录速度慢的解决办法 (1)可能是DNS反向解析的问题 [root@crushlinux~]#vi/etc/ssh/sshd_config在中添加或修改成: UseDNSno [root@cru ...
教大家多个域名绑定一个空间的解决办法,原创,自己已经测试过了,完全可以绕过杀毒软件,以及空间商.
一个空间放多个站的办法,多个域名绑定一个空间,域名解析问题的解决办法...创梦原创技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区: www.credream ...
fullpage在vue单页面当中使用会出现的问题以及解决办法
fullpage在vue单页面当中使用会出现的问题以及解决办法参考文章: (1)fullpage在vue单页面当中使用会出现的问题以及解决办法 (2)https://www.cnblogs.com/ ...

vue同一浏览器只允许同时登录一个账号的解决办法-真实项目使用

vue同一浏览器只允许同时登录一个账号的解决办法-真实项目使用相关推荐

最新文章

热门文章