Angular实现等待权限服务获取数据后初始化菜单的方案

问题分析 #

当前代码用setTimeout依赖固定延迟来等待权限数据加载，这种方式完全不可靠——网络请求耗时不确定，延迟设短了可能权限还没加载完成，设长了会导致菜单不必要的渲染延迟。正确的做法是利用RxJS的异步特性，在权限数据加载完成的回调中执行菜单初始化逻辑。

修改步骤 #

1. 改造PermissionService，暴露权限加载完成的信号 #

修改服务，添加一个可监听的Observable，让组件能精准感知权限数据是否加载完成：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { tap } from 'rxjs/operators';
import {ApiConfig} from "../../configs/api.config";
import {Permission} from "../../interface/permission";

@Injectable({
  providedIn: 'root'
})
export class PermissionService {
  private permissions: Permission[] = [];
  // 创建Subject用于发送权限加载完成的通知
  private permissionsLoadedSubject = new Subject<void>();
  // 对外暴露只读Observable，防止外部随意触发通知
  public permissionsLoaded$ = this.permissionsLoadedSubject.asObservable();

  constructor(private http: HttpClient) {
    this.initializePermissions();
  }

  public fetchPermissions(): Observable<Permission[]> {
    return this.http.get<Permission[]>('api/permissions').pipe(
      // 加载完成后更新本地权限，并发出加载完成信号
      tap((permissions: Permission[]) => {
        this.permissions = permissions;
        this.permissionsLoadedSubject.next();
        // 完成后关闭Subject，避免内存泄漏
        this.permissionsLoadedSubject.complete();
      })
    );
  }

  public getPermissions(): Permission[] {
    return this.permissions;
  }

  private initializePermissions(): void {
    this.fetchPermissions().subscribe(
      () => {},
      (error) => {
        console.error('Failed to fetch permissions:', error);
        // 即使请求失败，也关闭Subject避免组件一直等待
        this.permissionsLoadedSubject.complete();
      }
    );
  }
}

2. 修改SidebarComponent，监听权限加载完成后初始化菜单 #

移除setTimeout逻辑，在组件初始化时订阅服务的加载完成信号，触发菜单初始化：

import {Component, Inject, OnInit} from '@angular/core';
import {ROUTES_CONFIG} from "../../../../configs/routes.config";
import {SlidebarMenuItem} from "../../../../interface/slidebar-menu-item";
import {PermissionService} from "../../../../shared/services/permission.service";

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

  url: string = '';
  menuItems: SlidebarMenuItem[] = [];

  constructor(
    @Inject(ROUTES_CONFIG) public routesConfig: any, 
    private permissionService: PermissionService
  ) {}

  ngOnInit(): void {
    // 监听权限加载完成信号，触发菜单初始化
    this.permissionService.permissionsLoaded$.subscribe(() => {
      this.initMenuItems();
    });
    
    // 兼容权限已提前加载的场景（比如服务初始化早于组件）
    if (this.permissionService.getPermissions().length > 0) {
      this.initMenuItems();
    }
  }

  initMenuItems(){
    this.menuItems = [
      {
        title: 'dashboard',
        icon: 'desktop-mac-dashboard',
        href: null,
        routerLink: this.routesConfig.routes.admin.main,
        node: '',
        children: null,
        show: true,
      },
      {
        title: 'orders',
        icon: 'clipboard-text',
        href: '#',
        routerLink: this.routesConfig.routes.admin.orders,
        node: 'order',
        show: this.permissionService.getPermissions().some((item) => item.name === "read-order"),
        children: null,
      },
    ];
  }
}

方案优势 #

• 精准异步控制：通过RxJS Subject实现事件通知，确保菜单初始化逻辑只会在权限数据加载完成后执行，完全不受网络耗时影响。
• 内存安全：权限加载完成后关闭Subject，避免不必要的内存泄漏；Angular组件中的订阅会在组件销毁时自动清理，也可按需添加takeUntil操作符进一步优化。
• 场景兼容：添加了权限已提前加载的判断，避免组件初始化时错过加载信号。

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