多标签页并发请求，Token 刷新失败怎么办？

先说实话，咱们这玩意儿真是让人又爱又恨。

打开好几个标签页，后台跑着数据同步，结果 Token 瞬间炸了。

那种感觉，就像刚买的薯片被小朋友抢光了一样。

别急，先给你端上一杯咖啡，慢慢聊。

用户打开了 N 个 Tab。

每个 Tab dou会在本地检查 Token 有效性。

一旦发现过期，就立马去后端请求 refresh。

Ru果这些请求在同一时间点撞上，就会出现“刷不出来”的尴尬。

后端往往只接受一次刷新请求，后面的全被拒绝。

于是页面直接弹出登录失效的提示——这下子用户体验直接打了零分。

Zui常见的办法是用 localStorage + storage 事件来广播刷新状态。

听起来高大上，其实代码量爆炸。

再者，一旦某个 Tab 卡死、网络卡顿，那整个队列dou堵住了。

还有人会写一个轮询的定时器，每隔几秒去检查，这玩意儿简直是资源浪费的代名词。

// 纯原生 Web Locks 优雅解决多标签页并发刷新

import { http } from '@/utils/request';
async function getValidToken {
  const localToken = localStorage.getItem;
  if ) {
    return localToken;
  }
  return navigator.locks.request => {
    const latestToken = localStorage.getItem;
    if ) {
      return latestToken;
    }
    try {
      const { accessToken } = await http.post('/auth/refresh', {
        refreshToken: localStorage.getItem
      });
      localStorage.setItem;
      return accessToken;
    } catch  {
      handleLogout;
      throw err;
    }
  });
}

这段代码几乎Ke以直接搬进去，用不到任何第三方库。

核心就是把「只Neng有一个人拿到钥匙」的逻辑交给浏览器底层处理。

其它 Tab 自动排队，等前面的处理完才轮到自己。

// 带超时控制的 Web 锁

async function acquireLockWithTimeout {
  const controller = new AbortController;
  const timeoutId = setTimeout => controller.abort, 5000);
  try {
    return await navigator.locks.request(
      'token_refresh_lock',
      { signal: controller.signal },
      async  => {
        clearTimeout;
        if  {
          throw new Error;
        }
        return await doHeavyTokenRefresh;
      }
    );
  } catch  {
    if  {
      console.warn;
    }
    throw err;
  }
}

要是网络慢到飞起，这里就会在五秒后自动 abort，让后面的页面继续往前走。

这样就不会出现「所有页面dou卡死」的灾难场景了。

我们有个客户天天开十几个标签页对账，一会儿kan到「登录失效」弹窗就抓狂。

经排查发现，是因为多个页面几乎同时发送 refresh 请求，导致后端把旧 token 拉黑，然后把所有 Session 踢下线。

用了 Web Locks 后只剩一个页面真正去刷新，其余页面直接复用新 token，问题瞬间消失。

问：我们的网站内容hen专业，但百度搜索根本不收录啊！到底为啥？

A： 确认站点没有被 robots.txt 或 meta tag 禁止抓取；然后检查是否存在大量重复内容或极低质量页面；再者，要确保网站Neng够正常返回 HTTP 200，而不是重定向或错误码；Zui后把站点提交到百度站长平台，让它主动抓取一次。一般来说只要符合这些基本要求，百度自然会慢慢收录的。哈哈，这事儿跟 Token 刷新差不多，dou得一步步排查才Neng找到根源呀！

✅ 在 Chrome DevTools 的 Application → Locks 中Ke以kan到当前锁的持有情况。

✅ 用 console.time/console.timeEnd 包裹 refresh 请求，kan一下到底花了多久。

✅ Ru果想手动释放锁，Ke以在 finally 块里调用 navigator.locks.unlock。

A、别忘了在抢到锁之后 校验本地 token，有可Neng前面Yi经刷好了。

B、网络异常一定要捕获，否则异常会导致 lock 永久占用。

C、Ru果你使用的是 Service Worker，还得注意它对 lock 的可见性——Service Worker 和页面是共享同一个锁空间的。

说实话，以前我也总是想方设法自己写各种同步轮子，结果代码堆得跟山一样高。

。

Crap，不对不对，我应该说：真的hen感谢浏览器团队把这么强大的功Neng埋进底层。

P.S. Ru果你还有别的多标签页同步需求，比如防抖搜索、跨 Tab 消息推送，douKe以考虑先kankan Web Locks Neng不Neng搞定，再决定是否引入geng复杂的方案。

#结束# 😁