Angular组件使用oidc-client首次获取认证状态返回false问题咨询

问题1：为什么认证状态第一次返回false，第二次返回true #

这个现象是完全符合预期的，并非异常，原因如下：

• AuthService中定义的_authNavStatusSource是BehaviorSubject<boolean>(false)，BehaviorSubject的特性是只要有新的订阅者接入，就会立即向其推送当前存储的最新值，你初始化时设置的默认值就是false，所以组件完成订阅的第一时间就会收到第一个false值。
• AuthService构造函数中调用的this.manager.getUser()是异步Promise方法，需要等oidc-client从本地存储（通常是sessionStorage/localStorage）读取到已缓存的用户信息后，才会执行then回调，调用_authNavStatusSource.next()推送最新的认证状态true，这时候你就会收到第二个值。
  你看到的两次打印不是ngOnInit触发了两次，是订阅的可观察对象先后推送了两次值，这个逻辑本身是正常的。

问题2：为什么h2显示true，但pec-header组件的isAuth仍为false #

父组件的isAuthenticated已经正确更新为true（h2可以正常渲染即可证明），问题出在pec-header子组件的实现上，常见原因和对应解决方案如下：

• 子组件未监听@Input()属性的变化：如果你在pec-header内部只在ngOnInit生命周期中读取了一次isAuth的值赋值给了内部变量，后续输入属性更新时内部变量没有同步更新，就会出现这个问题。解决方案有两种：
  1. 直接在子组件模板中使用@Input() isAuth，不要额外赋值给内部变量，输入属性更新时模板会自动同步
  2. 用setter监听输入属性变化：

  // pec-header.component.ts
  private _isAuth = false;
  @Input() set isAuth(value: boolean) {
    this._isAuth = value;
    // 这里可以执行状态变化后的后续逻辑，比如切换登录/未登录视图
  }
  get isAuth() {
    return this._isAuth;
  }
  

• 子组件开启了OnPush变更检测策略：如果pec-header的@Component装饰器中配置了changeDetection: ChangeDetectionStrategy.OnPush，可以手动注入ChangeDetectorRef，在输入属性变化时触发变更检测，或者直接用上述setter的方式处理。

额外优化建议

你当前的订阅没有处理取消订阅的逻辑，容易出现内存泄漏，推荐用async管道自动管理订阅：

<!-- 父组件模板 -->
<ng-container *ngIf="authService.authNavStatus$ | async as isAuthenticated">
  <pec-header [isAuth]="isAuthenticated"></pec-header>
  <br>
  <br>
  <hr>
  <h2>{{isAuthenticated}}</h2>
  <hr>
</ng-container>

这样父组件里不需要手动订阅、也不需要维护subscription变量，async管道会自动在组件销毁时取消订阅，同时值更新时自动触发视图更新。

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