前端多个标签页怎样同步登录状态变化

多个标签页同时打开同一个网站时，登录页签退出了，旁边的业务页签却还显示“已登录”，这是典型的跨文档状态不同步。解决这类问题时，标签页之间只需要传递“登录状态可能变化”的通知，不应该把 access token 或用户隐私塞进广播消息；收到通知后，各页重新读取服务端会话，才是可靠的状态刷新方式。

推荐把 BroadcastChannel 当作同源标签页之间的即时信号通道：登录、退出或会话失效时发送一个不含令牌的事件，接收页调用现有的会话查询接口更新本地 UI；不支持 BroadcastChannel 时，再用 localStorage 触发 storage 事件降级。

先把“通知”和“真实状态”分开

BroadcastChannel 连接的是同源的窗口、标签页、iframe 或 Worker。它适合传递“请重新检查会话”这样的事件，不适合充当认证系统本身。登录是否有效，最终仍应由服务端会话、HttpOnly Cookie 或现有的 session API 决定。

这样设计还有一个好处：即使某个标签页错过了瞬时消息，也可以在页面初始化、重新获得焦点或接口返回 401 时再次调用会话查询，不会因为广播消息不是持久队列而永久卡在旧状态。

用一条小消息表达登录状态变化

先定义通道名称和事件格式。所有同源标签页使用同一个通道名，事件结构则保持足够小，接收方只根据 type 和 reason 判断是否刷新会话。

const AUTH_CHANNEL = "app-auth-state";

function createAuthSignal() {
  // 通道名只用于同源页面相互发现，不承载 token 或用户资料。
  const channel = new BroadcastChannel(AUTH_CHANNEL);

  function publish(reason) {
    const message = {
      type: "auth-state",
      reason,
      // 事件编号只用于去重；不要把会话凭据放进消息。
      id: crypto.randomUUID(),
    };

    channel.postMessage(message);
  }

  return {
    publish,
    close() {
      // 页面不再需要同步时主动关闭，释放底层通道连接。
      channel.close();
    },
  };
}

const authSignal = createAuthSignal();

// 登录成功后只发“状态已变化”的通知，当前页自己刷新自己的界面。
authSignal.publish("login");

// 退出成功或服务端判定会话失效时使用同一套协议。
authSignal.publish("logout");

postMessage() 会把消息传给同源的其它 BroadcastChannel 对象；发送消息的这个通道对象不会收到自己的广播。因此，触发登录或退出的当前页必须自己更新 UI，不能等自己的监听器回调。

如果应用需要在多个模块中发布事件，建议只暴露 publish(reason) 这样的窄接口，限制 reason 为固定值。不要让业务模块随意把接口响应、Cookie 内容或用户对象塞进广播载荷。

收到通知后重新查询会话

接收方的核心动作不是直接把本地状态改成“已登录”或“已退出”，而是调用已有的 refreshSession()。这个函数可以请求一个返回当前用户或 401 的会话接口，再把结果交给状态管理器。

const channel = new BroadcastChannel("app-auth-state");
let lastEventId = "";

async function refreshSession() {
  // 由项目现有的会话接口决定是否登录；这里不读取广播中的身份信息。
  const response = await fetch("/api/session", {
    credentials: "include",
    headers: { Accept: "application/json" },
  });

  if (response.status === 401) {
    return { authenticated: false, user: null };
  }
  if (!response.ok) {
    throw new Error(`session request failed: ${response.status}`);
  }

  return response.json();
}

channel.addEventListener("message", async (event) => {
  const message = event.data;
  // 先过滤类型，避免把同一通道里的无关消息当成认证事件。
  if (!message || message.type !== "auth-state") return;
  if (message.id === lastEventId) return;
  lastEventId = message.id;

  try {
    const session = await refreshSession();
    // 把真实会话交给状态层，统一更新导航栏和受保护页面。
    authStore.replace(session);
  } catch (error) {
    // 网络失败不等于退出；保留旧状态并交给应用的错误提示策略。
    console.error("刷新登录状态失败", error);
  }
});

这里的去重主要防止应用层重复投递同一个事件。更重要的是，刷新动作要幂等：同一个登录变化被处理两次，最多产生两次会话查询，不应该重复创建订单、提交表单或修改业务数据。

登录和退出动作本身也要在当前页完成本地状态更新。例如退出请求成功后，当前页直接清空状态，再广播 logout；其它页收到消息后再查询会话。这样既不会等待自己的广播回调，也不会把“通知成功”误认为“退出请求成功”。

用 storage 事件提供兼容降级

localStorage 的变化会在同源的其它标签页触发 storage 事件，但不会在发起写入的当前页触发。它很适合作为 BroadcastChannel 不可用时的降级信号。注意降级通道同样只写一个短事件，不把令牌保存到可被脚本读取的存储中。

const STORAGE_KEY = "app-auth-signal";

function createCrossTabAuthSync({ refreshSession, replaceSession }) {
  const supportsChannel = "BroadcastChannel" in window;
  const channel = supportsChannel
    ? new BroadcastChannel("app-auth-state")
    : null;

  let lastEventId = "";

  async function apply(message) {
    // 两种传输方式共享同一个载荷检查和刷新逻辑。
    if (!message || message.type !== "auth-state") return;
    if (message.id === lastEventId) return;
    lastEventId = message.id;
    replaceSession(await refreshSession());
  }

  function onStorage(event) {
    // 只处理约定的键，并忽略 clear() 造成的无关变化。
    if (event.key !== STORAGE_KEY || !event.newValue) return;
    try {
      void apply(JSON.parse(event.newValue));
    } catch (error) {
      console.warn("忽略格式错误的登录状态信号", error);
    }
  }

  if (channel) {
    channel.addEventListener("message", (event) => void apply(event.data));
  } else {
    window.addEventListener("storage", onStorage);
  }

  return {
    publish(reason) {
      const message = {
        type: "auth-state",
        reason,
        id: crypto.randomUUID(),
      };

      if (channel) {
        // 支持 BroadcastChannel 时优先走即时消息。
        channel.postMessage(message);
      } else {
        // 降级写入会触发其它同源标签页的 storage 事件。
        localStorage.setItem(STORAGE_KEY, JSON.stringify(message));
      }
    },
    destroy() {
      // 组件卸载或页面结束时移除监听，并关闭通道。
      if (channel) channel.close();
      else window.removeEventListener("storage", onStorage);
    },
  };
}

上面的实现只在不支持 BroadcastChannel 时注册 storage 监听，避免同一标签页同时收到两次通知。若项目必须同时使用两种传输方式，也要给消息带上唯一 ID，并在接收层统一去重。

把首屏、失焦和清理边界补上

广播只是一种瞬时通知，不能代替初始化。每个标签页加载时都应该先查询一次当前会话；页面从后台恢复、关键接口返回 401 或网络重新连通时，也可以再次刷新。这样即使标签页打开时错过了退出消息，首屏仍能得到正确状态。

async function bootstrapAuth() {
  try {
    // 广播不是历史记录，首屏必须主动读取一次权威会话。
    authStore.replace(await refreshSession());
  } catch (error) {
    // 网络不可用时标记为未知，不要武断地改成未登录。
    authStore.markUnknown(error);
  }
}

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    // 从后台回到前台时重新确认，覆盖错过消息或会话过期的情况。
    void bootstrapAuth();
  }
});

void bootstrapAuth();

组件级封装还要提供 destroy() 或 close()。BroadcastChannel.close() 会终止当前对象与底层通道的连接，并让浏览器最终回收它；只移除业务回调而不关闭通道，长时间运行的单页应用可能留下不必要的对象。

什么时候用 BroadcastChannel，什么时候只用 storage

最终可以把方案收敛成四条：通道只发状态变化信号；当前页自己更新；其它页收到信号后重新查会话；首屏和回前台时主动补一次查询。只要把令牌留在既有安全会话中，多个标签页就能保持及时同步，同时避免把广播接口误当成认证存储。

相关问题

BroadcastChannel 能把消息发给其它域名吗？

不能。它面向同源的浏览上下文；不同协议、主机或端口的页面不能直接共享同一个频道。

为什么发送页收不到自己的登录状态消息？

发送消息的 BroadcastChannel 对象不会收到自己的广播。发布登录或退出事件后，当前页应直接更新状态，或者显式调用一次会话刷新。

storage 事件为什么在当前标签页没有触发？

这是它的设计：事件通知的是其它共享同一存储区的文档。当前页写入后应自行处理本地状态，其它页再通过事件刷新。

可以把 token 放到 BroadcastChannel 里吗？

不建议。广播消息会被同源上下文中的监听者接收；认证变化只需发送不含凭据的信号，让各页使用既有安全会话获取真实状态。