浏览器多标签页刷新token的问题如何解决？

Question

有一个功能是当token快过期的时候，及时刷新一下token，现在的问题是，如果用户打开了多个浏览器tab，这个几个tab页面都会触发刷新token操作，如何才能实现只有一个tab页面执行刷新token操作呢

Answer 1

这个感觉就是找到一种方式(策略)，能够从众多tab页中选择出一个来触发操作，类似一个协同机制？

感觉可以在触发刷新token时，校验一下当前tab页是否处于可见/活动状态。

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

1. sw 能拦截所有tab的请求，所以肯定能控制只有一个

2. tab 间通信，先触发的通知其他页面。比如说做一个时间戳，其他页面拿到时间戳和本地的做一个比较。

   1. localStorage 和 window.onstorage。直接更新。
   2. postmessage 通信

3. tab 间通信，选举一个最合适的。

   1. 比如说 document.hidden 判断是否在前台，前台页面优先级肯定更高。
   2. 比如说判断一下最后交互时间，用户最后使用的页面优先级更高。
   3. 其他也可以选择最稳定的页面，比如说有音频播放着，肯定不会被系统回收的tab，优先级最高。
4. 上述肯定是用了 token 存 stroage 了。那么改成 cookie 是不是就没这个问题了
5. 上述操作需要用户主动续，那么改成服务端续是不是就没问题？
6. 如果是为了换新 token，我猜现在的问题是后端会生成多个 token，导致异常。那么是不是可以改成token多少分钟内有效，即使多次调用也不会多次生成？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 3

可以试试用 localStorage，标签页加载时先到 localStorage 检查是否已存在处理 token 的标签页，不存在则注入刷新 token 作业并标记到 localStorage 中，否则注入一个检查机制(确认作业标签页是否完成--应对异常的情况)，标签页关闭时清理状态记录；