vue同一浏览器登录不同账号,覆盖token的解决办法
同一个浏览器登录不同账号,感觉没什么问题,但是会有可能出现大问题,第二个登录的会把第一个登录的token覆盖掉,导致第二个登录用户会操作第一个登录者的某些数据,这里介绍一个解决办法。1、登录窗口登录了A账户,再复制相同的url,登录B账户针对简单的A登录,然后换B登录,只要登陆了就可以去任意跳转,简单处理,直接上代码main.jsouter.beforeEach((to,from,next) =&
同一个浏览器登录不同账号,感觉没什么问题,但是会有可能出现大问题,第二个登录的会把第一个登录的token覆盖掉,导致第二个登录用户会操作第一个登录者的某些数据,这里介绍一个解决办法。
1、登录窗口登录了A账户,再复制相同的url,登录B账户
针对简单的A登录,然后换B登录,只要登陆了就可以去任意跳转,简单处理,直接上代码 main.js
outer.beforeEach((to,from,next) => { //这里是在所有路由跳转之前都会去执行以下操作
if(to.path == '/'){ //如果要去的是登录页
next() //随意,爱去哪去哪
} else { //否则
if(localStorage.getItem('token')){ //判判断当前浏览器是否有登录用户信息
next() //有,随意,爱咋咋地
} else { //否则,
next({path:'/'}) //去登陆页
}
}
})
这里的token是是用户登录系统,后台返回的钥匙token
localStorage.setItem("token", 1)
这里你会问,为什么存localStorage,而不存sessionStore,我给你解释
localStorage:本地缓存,没有时间限制,将一直缓存在本地。
sessionStorage:会话缓存,即浏览器关闭的时候清除缓存数据。
有个情况要注意,退出的时候要记得清除缓存,不然本地会一直保留
1.设置缓存数据:localStorage.setItem(key,value);
2.获取缓存数据:localStorage.getItem(key);
3.获取全部缓存数据:localStorage.valueOf();
4.获取指定下标的key键值:localStorage.key(N);
5.删除缓存数据:localStorage.removeItem(key) ;
6.清空缓存数据:localStorage.clear();
2、窗口1登录了账号A,并停留在一些预操作的页面,这时登录了账号B
这时登录的账号B会替换掉A的登录token,然后账号A的页面可能会被账号B篡改数据,A的查询可能会查到账号B的数,如果权限不同,页面展示的内容肯定又不一致,这些问题,如何正确的规避呢?
后端处理:所有的登录者在操作数据的时候,校验是不是归属自己名下的数据,不是自己名下的数据,直接报错抛异常。不过查询信息的问题,不能规避,A账号能查询到B账号的信息,这会导致账号信息泄密,方法不能适用,但能规避操作数据。
换个方式。
前端处理,前端要监测浏览器是否又新窗口执行了账号登录,检测浏览器本地存储的东西,但是watch不能监测非vue机制存的数据,localStorage中的数据不能实时被拿到,也不能放到vuex中,vuex在其他账号登录时会被重置,同样也拿不到。
正确的实现: 创建一个新文件,并创建一个全局变量globalToken,让组件去引用,这样,watch就会检测到这个全局变量,要做的事情是,这个全局变量不能被其他窗口覆盖掉,在登录组件login.vue里面引入变脸globalToken,登录成功后进行赋值
//先引入变量
import global from '@/config/common.js'
methods: {
login () {
if (this.user == '') {
this.$message.error('账号不能为空!'); //账号校验
} else if (this.password == '') {
this.$message.error('密码不能为空!'); //密码校验
} else {
this.setCookie(this.user)
this.$post('/api/manage/user/login', {
userName: this.user,
passWord: this.password
}).then(res => {
localStorage.setItem("token", 1)
global.token= res.token // 赋值给全局变量
localStorage.setItem('userId', res.token) //同时把token存到本地localStorage
this.$router.push({path: '/container'})
})
.catch(err => {
this.$message.error(err.msg)
})
}
}
}
上面代码,在登录成功后,会哎全局变量中存一份token,然后会在本地localStorage也存一份,
main.js里
import global from '@/config/common.js' //引入全局变量
window.addEventListener("visibilitychange",function(){ //检测浏览器变化,方法执行
if (document.hidden == false && global.aaa != localStorage.getItem('userId')) {
global.token= localStorage.getItem('userId') //当前登录的用户信息与全局存的用户信息不同,覆盖新的用户信息,否则是最初设的值
}
});
最后,在app.vue里面监听这个全局变量的变化,做到实时刷新界面数据
watch: {
'global.token' : 'refresh'
},
methods: {
refresh () {
//现将app.vue下面的 头部组件,菜单组件,内容组件全都刷新出来,做到实时同步
this.hackReset = false
this.$nextTick(() => {
this.hackReset = true
})
}
}
此时,第二个窗口B登录,返回第一个A登录的窗口,整个页面会同时刷新所有的页面数据,效果实现了,也达到了自己想要的目的。
完活!!!!
提供思路,自己去解决问题!!也许你会有更好的思路!!!
更多推荐
所有评论(0)