如何限制Vue.js单页应用仅在一个浏览器标签页运行

嘿，这个场景我太熟悉了——做RTC应用最怕多标签页搞出回声或者资源冲突，结合Vue.js的SPA特性，给你几个落地性强的方案：

核心思路是用localStorage存一个当前激活实例的唯一标识，新标签页打开时检查这个标识，发现已有激活实例就提示用户或关闭当前页。

• 第一步：在根组件App.vue中初始化监听逻辑
  先在data里存当前实例的唯一ID，避免重复生成：

data() {
  return {
    appInstanceId: `rtc-active-${Date.now()}`
  }
}

然后在mounted钩子中绑定监听事件：

mounted() {
  // 标记当前实例为激活状态
  localStorage.setItem('activeRtcApp', this.appInstanceId);
  
  // 监听页面可见性变化（切换标签页时触发）
  document.addEventListener('visibilitychange', this.handleTabVisibility);
  // 监听页面关闭/刷新，清除激活标记
  window.addEventListener('beforeunload', this.handlePageUnload);
},
beforeUnmount() {
  // 组件销毁时移除监听，避免内存泄漏
  document.removeEventListener('visibilitychange', this.handleTabVisibility);
  window.removeEventListener('beforeunload', this.handlePageUnload);
}

• 第二步：实现对应的处理方法

methods: {
  handleTabVisibility() {
    const activeInstanceId = localStorage.getItem('activeRtcApp');
    // 如果当前页面不可见，且激活标识不是自己的，说明有其他标签页在运行
    if (document.hidden && activeInstanceId !== this.appInstanceId) {
      alert('该应用只能同时打开一个标签页，避免RTC回声问题！');
      // 注意：浏览器可能阻止自动关闭，所以优先引导用户手动关闭
      // window.close();
    } else if (!document.hidden) {
      // 当当前页切换为激活状态时，更新激活标识为自己的
      localStorage.setItem('activeRtcApp', this.appInstanceId);
    }
  },
  handlePageUnload() {
    // 页面关闭时清除激活标记
    localStorage.removeItem('activeRtcApp');
  }
}

这个API能让同一域名下的标签页直接通信，比localStorage更精准，还能避免浏览器崩溃导致标记未清除的问题。

同样在App.vue的mounted中实现：

mounted() {
  // 创建一个专属通信频道
  const bc = new BroadcastChannel('rtc-single-tab-channel');

  // 新标签页打开时，向其他标签页发送检测消息
  bc.postMessage({ type: 'check-active-instance' });

  // 监听其他标签页的回复
  bc.onmessage = (e) => {
    if (e.data.type === 'instance-exists') {
      alert('该应用已在其他标签页运行，请关闭后重试！');
      // 尝试关闭当前页（受浏览器限制，可能不生效）
      window.close();
    }
  };

  // 监听来自新标签页的检测请求，回复已有实例
  bc.addEventListener('message', (e) => {
    if (e.data.type === 'check-active-instance') {
      bc.postMessage({ type: 'instance-exists' });
    }
  });

  // 页面关闭时销毁频道
  window.addEventListener('beforeunload', () => {
    bc.close();
  });
}

因为是SPA，你可以把单标签限制逻辑封装成全局Mixin，这样所有组件都能复用，不用每个页面写一遍：

创建src/utils/singleTabGuard.js：

export default {
  install(Vue) {
    Vue.mixin({
      data() {
        return {
          appInstanceId: `rtc-active-${Date.now()}`,
          broadcastChannel: null
        };
      },
      mounted() {
        this.initSingleTabGuard();
      },
      beforeUnmount() {
        if (this.broadcastChannel) {
          this.broadcastChannel.close();
        }
        window.removeEventListener('beforeunload', this.cleanupGuard);
      },
      methods: {
        initSingleTabGuard() {
          // 这里用方案二的Broadcast Channel实现
          this.broadcastChannel = new BroadcastChannel('rtc-single-tab-channel');
          
          this.broadcastChannel.postMessage({ type: 'check-active-instance' });
          
          this.broadcastChannel.onmessage = (e) => {
            if (e.data.type === 'instance-exists') {
              alert('该应用只能单标签运行，避免RTC资源冲突！');
            }
          };
          
          this.broadcastChannel.addEventListener('message', (e) => {
            if (e.data.type === 'check-active-instance') {
              this.broadcastChannel.postMessage({ type: 'instance-exists' });
            }
          });
          
          window.addEventListener('beforeunload', this.cleanupGuard);
        },
        cleanupGuard() {
          localStorage.removeItem('activeRtcApp'); // 如果用了方案一的话
          if (this.broadcastChannel) this.broadcastChannel.close();
        }
      }
    });
  }
};

然后在main.js中引入并使用：

import Vue from 'vue';
import singleTabGuard from './utils/singleTabGuard';

Vue.use(singleTabGuard);

• 浏览器对window.close()有严格限制，只有通过JS打开的窗口才能被自动关闭，所以优先用弹窗提示用户手动关闭。
• 针对你的RTC场景，就算限制了单标签，也建议在页面不可见时暂停媒体流：

// 在visibilitychange事件中添加
if (document.hidden) {
  // 假设stream是你的媒体流实例
  stream.getTracks().forEach(track => track.enabled = false);
} else {
  stream.getTracks().forEach(track => track.enabled = true);
}

• 如果用localStorage方案，要考虑浏览器崩溃导致标记未清除的情况，可以给标记加时间戳，每次检查时判断是否过期。

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