编程日志(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参数和本地存储的方法可以自己想办法实现


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