编程日志(02)—同一浏览器多用户登录session冲突问题

账号登录冲突

在后端程序中,往往将session和成功登录的用户id进行绑定来保持登录状态,这样前后端交互时就不用显示传递用户ID来判断是哪个用户,并通过设置session过期时间来保障账户的安全。

session的值会被后端设置在cookie,前端无需做什么特别操作,正常请求接口即可。由于session就相当于用户id,当同一个浏览器存在多个标签页,A页是A用户,B页是B用户,那么session绑定的其实是后登陆的那一个用户的id,因为这种绑定是在登陆接口处理的。这样的话假如请求的数据(比如查看个人信息)是基于session拿用户id的,就会导致A用户拿到B用户的数据。

一个临时思路

登陆成功后将用户id加密后存储到本地,在每个需要验证的页面加上这个参数,当用户刷新页面时与本地存储的值进行比较,不符合就跳转登陆页。(后登陆的用户会覆盖上一个用户的本地值,而url里的参数不会变所以会导致URL中获取的值和本地不一致)

由于项目使用的是vue,可以将在路由里设置钩子函数,在跳转路由前检查对应数据,路由是hash模式,获取url参数和本地存储的方法可以自己想办法实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

router.beforeEach((to, from, next) => {
// 工具方法,获取url地址中traceid的值
let urltraceid = getPop('traceid');
// 获取localStorege中traceid的值
let localtraceid = getLocalStorage('traceid').traceid
console.log('url=%s,local=%s ', urltraceid, localtraceid)
// 先判断两个参数是否存在
if (urltraceid && localtraceid) {
if (urltraceid == localtraceid) {
next()
} else {
let url = window.location.href.replace(/[\?,\#]\S*/g, '');
window.location.href = url;
next({
path: "/"
});
}
}

})

在登陆的时候设置参数,跳转地址类似于下面

1
index.html?traceid=xx#/main
Author: sumshare
Link: http://blog.sumshare.cn/2019/05/28/vuesession/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.