如何在Angular 8中实现禁止同一浏览器多标签页打开应用？

核心思路 #

利用浏览器同源标签页共享storage的特性，结合storage事件监听，通过唯一标识（UUID）检测当前应用是否已在其他标签页活跃，从而限制多标签页打开。

实现步骤 #

1. 创建标签页守卫服务

生成一个单例服务TabGuardService，负责管理标签页状态、生成唯一标识、监听storage事件及处理重复标签页逻辑：

import { Injectable, OnInit } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TabGuardService implements OnInit {
  private tabId: string;
  private readonly storageKey = 'activeTabId';

  ngOnInit(): void {
    this.initTabValidation();
    window.addEventListener('storage', (event) => this.onStorageChange(event));
  }

  private initTabValidation(): void {
    // 生成当前标签页唯一ID
    this.tabId = this.generateUUID();
    const activeTabId = sessionStorage.getItem(this.storageKey);

    if (activeTabId) {
      // 已有活跃标签页，触发重复处理逻辑
      this.handleDuplicateTab();
    } else {
      // 将当前标签页设为活跃状态
      sessionStorage.setItem(this.storageKey, this.tabId);
    }

    // 页面卸载时清除当前标签页的活跃标识
    window.addEventListener('beforeunload', () => {
      if (sessionStorage.getItem(this.storageKey) === this.tabId) {
        sessionStorage.removeItem(this.storageKey);
      }
    });
  }

  private onStorageChange(event: StorageEvent): void {
    if (event.key === this.storageKey) {
      const newActiveTabId = event.newValue;
      // 若当前标签页不是新的活跃标签，触发重复处理
      if (newActiveTabId && newActiveTabId !== this.tabId) {
        this.handleDuplicateTab();
      }
    }
  }

  private handleDuplicateTab(): void {
    // 自定义重复标签页处理逻辑，示例：提示+禁用页面交互
    alert('当前应用已在其他标签页打开，请关闭当前标签页');
    document.body.style.pointerEvents = 'none';
    // 可选：跳转到登录页/首页
    // window.location.href = '/login';
  }

  private generateUUID(): string {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
      const r = Math.random() * 16 | 0;
      const v = c === 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }
}

2. 在根组件中注入服务

在AppComponent中注入TabGuardService，确保应用启动时立即执行标签页检测：

import { Component, OnInit } from '@angular/core';
import { TabGuardService } from './tab-guard.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private tabGuardService: TabGuardService) {}

  ngOnInit(): void {
    // 服务会在注入时自动初始化，无需额外操作
  }
}

关键注意事项 #

• 同源限制：该方案仅适用于同源标签页（相同协议、域名、端口），跨域标签页无法通过storage事件互通。
• 隐私模式兼容性：浏览器隐私模式下，不同标签页的storage是隔离的，此方案无法生效。
• 自定义处理逻辑：handleDuplicateTab方法可根据业务需求调整，比如仅弹窗提示、跳转至指定页面，或禁用核心功能而非完全锁死页面。

内容的提问来源于stack exchange，提问作者Asmitha j.s