背景
公司正在开发的项目中,目前提出了一个需求,账号通过登录之后,在系统内部客户列表页面点击登录获取token,跳转链接打开新窗口或标签页。此时,两个窗口的账号信息独立,互不影响。在我刚拿到这个需求,第一反应是不可能的,这就等同于说一个游戏同时登录两个账号且不被顶号,但是在研究之后实现了这个功能,因此记录一下此次功能实现过程。
踩坑
首先,web端网站的账号信息一般就是存在cookie、localStorage、sessionStorage中的,其中前两个存储都是同域名下同浏览器一致的,不管怎么打开新的标签页,新的窗口,都是一直的。于是想在sessionStorage中存储token,实现不同标签页存储不同的token,请求时取当前sessionStorage中的值。
但是,sessionStorage的机制是,手动打开的新标签页或新窗口,sessionStorage是独立的,但是通过点击跳转链接打开的却是和原来的sessionStorage是一致的,因此这个方案无效。
解决方案
客户登录链接跳转时打开新窗口时不更换token,而是在localStorage中存储一个备用的token;
Persistent.setLocal('secondInfo', JSON.stringify(data), true, 30 * 60 * 1000