Angular中实现页面独占访问：阻止多用户同时进入指定页面的方法

嘿，刚好之前做过类似的页面互斥需求，用Angular的全局共享服务就能搞定，给你一步步拆解实现步骤：

1. 先搞个全局状态服务跟踪页面状态 #

我们需要一个全局服务来统一管理/test页面的占用状态，这样表格组件和test组件都能访问到这个状态：

// page-status.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PageStatusService {
  // 用这个变量标记/test页面是否被占用
  isTestPageBusy = false;
}

2. 在Test页面组件里更新状态 #

当用户进入/test页面时，把状态设为“忙碌”；用户离开页面（组件销毁）时，再把状态重置回来：

// test.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { PageStatusService } from './page-status.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit, OnDestroy {

  constructor(private pageStatusService: PageStatusService) { }

  ngOnInit(): void {
    // 进入页面时标记为忙碌
    this.pageStatusService.isTestPageBusy = true;
  }

  ngOnDestroy(): void {
    // 离开页面时取消忙碌标记
    this.pageStatusService.isTestPageBusy = false;
  }
}

3. 在表格组件里加判断和提示 #

回到你的表格所在组件，注入刚才的状态服务，在点击事件里先判断页面是否被占用，再决定是否跳转：

// 你的表格组件.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { PageStatusService } from './page-status.service';
// 用PrimeNG的MessageService做提示，你也可以用项目里的其他提示组件
import { MessageService } from 'primeng/api';

@Component({
  selector: 'app-your-table-component',
  templateUrl: './your-table-component.html',
  styleUrls: ['./your-table-component.css'],
  providers: [MessageService] // 如果没全局注册MessageService的话，这里加上
})
export class YourTableComponent {
  mnoes: any[] = []; // 你的表格数据
  selectmno: any;
  items: any[] = []; // 右键菜单配置

  constructor(
    private router: Router,
    private pageStatusService: PageStatusService,
    private messageService: MessageService
  ) { }

  test(event, mno){
    console.log("On click",event,mno);
    
    // 先检查/test页面是否被占用
    if(this.pageStatusService.isTestPageBusy){
      // 给用户提示页面正忙
      this.messageService.add({severity:'warn', summary: '温馨提示', detail: '当前页面正忙，请稍后再试'});
      return; // 直接返回，阻止跳转
    }

    // 状态正常，跳转到/test页面
    this.router.navigate(['/test']);
  }
}

额外优化：阻止直接通过地址栏访问 #

上面的方法能阻止表格点击跳转，但用户如果直接在地址栏输入/test还是能进去，所以可以加个路由守卫来拦截：

先写路由守卫 #

// test.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { PageStatusService } from './page-status.service';
import { MessageService } from 'primeng/api';

@Injectable({
  providedIn: 'root'
})
export class TestPageGuard implements CanActivate {

  constructor(
    private pageStatusService: PageStatusService,
    private router: Router,
    private messageService: MessageService
  ) { }

  canActivate(): boolean {
    if(this.pageStatusService.isTestPageBusy){
      this.messageService.add({severity:'warn', summary: '温馨提示', detail: '当前页面正忙，请稍后再试'});
      this.router.navigate(['/']); // 跳回首页或者你指定的页面
      return false;
    }
    return true;
  }
}

然后在路由配置里添加守卫 #

// app-routing.module.ts
import { TestPageGuard } from './test.guard';
import { TestComponent } from './test/test.component';

const routes: Routes = [
  // ...其他路由配置
  { 
    path: 'test', 
    component: TestComponent, 
    canActivate: [TestPageGuard] // 加上这个守卫
  }
];

注意事项 #

• 如果你的应用是多标签页或者多实例部署的，这种前端状态管理就不够用了，得靠后端来做状态同步（比如用Redis存占用状态，接口校验）。但如果是单实例单标签的场景，上面的方法完全够用。
• 记得处理组件销毁的边界情况，比如用户直接关闭浏览器标签页，这时候ngOnDestroy不会触发，你可以监听beforeunload事件来重置状态，不过这种情况概率低，看你的需求要不要加。

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