如何阻止用户在多个浏览器标签页中打开React应用

目前浏览器没有提供原生禁止多标签页打开同一站点的API，无法实现100%的绝对拦截，但你提到的通过本地存储校验标签页唯一ID的方案是当前业界最通用的实现方式，可以覆盖绝大多数普通用户的使用场景。

核心实现逻辑 #

• 每个标签页初始化时，用crypto.randomUUID()生成唯一的当前标签ID，无需引入额外依赖
• 应用挂载前先读取localStorage中的activeTabId字段：
  • 字段不存在时，将当前标签ID写入localStorage，同时监听beforeunload事件，页面正常关闭时主动清空存储的活跃标签ID
  • 字段存在时，判定为已存在活跃标签页，可直接调用window.close()关闭当前标签，或先跳转至提示页告知用户不允许多开后再执行关闭操作
• 额外增加心跳机制避免异常场景的ID残留：每隔3秒将当前时间写入localStorage的lastActiveTime字段，新标签打开时如果校验发现最后活跃时间距离当前超过10秒，说明之前的标签已经异常崩溃/被强制结束，可直接将当前标签设为活跃标签，无需关闭

可用实现方案 #

目前没有专门针对该需求的React第三方封装库，你可以直接封装为自定义Hooks引入项目，参考代码如下：

import { useEffect } from 'react';

const usePreventMultiTab = () => {
  const ACTIVE_TAB_KEY = 'react_app_active_tab_id';
  const LAST_ACTIVE_KEY = 'react_app_last_active_time';
  const currentTabId = crypto.randomUUID();
  let heartbeatTimer = null;

  useEffect(() => {
    // 初始化多开校验
    const existingTabId = localStorage.getItem(ACTIVE_TAB_KEY);
    const lastActiveTime = Number(localStorage.getItem(LAST_ACTIVE_KEY)) || 0;

    if (existingTabId && Date.now() - lastActiveTime < 10000) {
      alert('本应用不允许同时打开多个标签页');
      window.close();
      return;
    }

    // 注册当前标签为活跃标签
    localStorage.setItem(ACTIVE_TAB_KEY, currentTabId);
    // 启动心跳更新活跃时间
    heartbeatTimer = setInterval(() => {
      localStorage.setItem(LAST_ACTIVE_KEY, Date.now().toString());
    }, 3000);

    // 页面关闭时清理存储
    const handleUnload = () => {
      if (localStorage.getItem(ACTIVE_TAB_KEY) === currentTabId) {
        localStorage.removeItem(ACTIVE_TAB_KEY);
        localStorage.removeItem(LAST_ACTIVE_KEY);
      }
      clearInterval(heartbeatTimer);
    };

    window.addEventListener('beforeunload', handleUnload);
    return () => {
      window.removeEventListener('beforeunload', handleUnload);
      clearInterval(heartbeatTimer);
    };
  }, []);
};

export default usePreventMultiTab;

使用时直接在应用根组件（如App.jsx）中调用该Hooks即可生效。

注意事项 #

• 该方案仅能拦截普通用户的正常操作，对熟悉前端的用户可通过禁用JS、手动修改localStorage内容的方式绕过，安全要求高的场景需要配合后端实现单会话绑定：同一个用户账号同一时间仅允许一个会话ID有效，新会话创建后旧会话直接失效
• 部分浏览器的隐私模式下多标签的localStorage是隔离的，该场景下本地存储校验会失效
• 部分浏览器版本中，用户手动打开的新标签调用window.close()不会直接关闭，会弹出用户确认提示，这种情况可改为强制跳转至错误提示页，禁止用户访问应用核心内容

内容的提问来源于stack exchange，提问作者BitTree