Angular鉴权场景结合observables使用NgClass的最佳实践咨询

关于同一页面多次使用*ngIf="accountService.currentUser$ | async"的合理性 #

你当前的用法功能上不会出错：你采用ReplaySubject(1)作为数据源，属于热Observable，多次订阅不会重复触发接口请求，也不会产生逻辑问题，但不属于最优实现：

• 每次async管道都会创建独立的订阅实例，虽然性能损耗极小，但会产生冗余代码
• 后期维护时如果要修改数据源，需要同步修改所有订阅位置，维护成本高

最优优化方案 #

在模板顶层通过对象包装+as别名的方式仅订阅一次，全页复用订阅结果，同时兼容登录/未登录两种状态的渲染判断：

<!-- 把所有模板内容包在这个容器内 -->
<ng-container *ngIf="{ user: accountService.currentUser$ | async } as authState">
  <app-preloader></app-preloader>
  <ng-container *ngIf="authState.user" >
      <app-nav></app-nav>
      <app-sidebar></app-sidebar>
  </ng-container>

  <!-- Content Wrapper. Contains page content -->
  <div [ngClass]="{'content-wrapper': authState.user, 'content-wrapper-login': !authState.user}">
      <!-- 原有内容保持不变 -->
      <div class="content-header">
          <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1 class="m-0">Main</h1>
              </div><!-- /.col -->
            </div><!-- /.row -->
          </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

      <!-- Main content -->
      <section class="content">
          <div class="container-fluid">
              <router-outlet></router-outlet>    
          </div><!-- /.container-fluid -->
      </section>
      <!-- /.content -->
  </div>
  <app-footer></app-footer>
</ng-container>

这个方案的优势是全局仅产生一个订阅，async管道会自动管理订阅生命周期，不会产生内存泄漏，所有需要判断登录状态的位置直接使用authState.user即可。

[ngClass]根据登录状态修改CSS类的最佳实现 #

你当前代码中的isLoggedIn是硬编码的固定值，无法和实际登录状态同步，推荐根据使用场景二选一：

方案1：模板别名直接判断（优先推荐） #

直接使用上面的authState.user判断即可，不需要在组件类写任何额外逻辑，自动响应登录/登出状态变化，就是上面示例中[ngClass]的写法。

方案2：组件内订阅维护状态 #

如果组件类中也需要用到登录状态，可以在类内订阅currentUser$维护状态变量：
首先修改app.component.ts：

import { HttpClient } from '@angular/common/http';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { User } from './_models/user';
import { AccountService } from './_services/account.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Admin Cockpit';
  users: any;
  isLoggedIn = false;
  // 用于销毁订阅，防止内存泄漏
  private destroy$ = new Subject<void>();

  constructor(private http: HttpClient, public accountService: AccountService){}

  ngOnInit() {
    this.setCurrentUser();
    // 订阅登录状态变化
    this.accountService.currentUser$
      .pipe(takeUntil(this.destroy$))
      .subscribe(user => {
        this.isLoggedIn = !!user;
      })
  }

  setCurrentUser() {
    // 修复原代码空值直接解析的问题
    const userStr = localStorage.getItem('user');
    const user = userStr ? JSON.parse(userStr) : null;
    this.accountService.setCurrentUser(user);
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

模板中的[ngClass]可以保留原有写法，直接绑定isLoggedIn即可。

额外优化建议 #

• 你当前的AccountService中setCurrentUser方法入参类型可以调整为User | null，兼容未登录的空值场景
• 如果项目有多路由鉴权需求，可以配合Angular路由守卫使用currentUser$做拦截，避免每个页面重复写登录判断逻辑

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