Angular登录后顶部栏用户信息不加载，需手动刷新问题

问题原因分析 #

结合你的代码来看，登录后顶部栏不显示用户信息的核心原因主要有以下几点：

1. 订阅时机与变更检测问题：你在组件类顶层直接声明订阅，可能导致订阅在组件完全初始化前建立，或者无法触发Angular的变更检测，使得isLoggedIn变量更新后视图未同步。
2. 模板重复订阅async管道：多次使用authService.currentUser|async会创建多个独立订阅，虽然BehaviorSubject会推送最新值，但可能引发异步处理的时序问题，导致视图未及时响应。
3. saveToken方法的过期时间计算错误：你错误地从localStorage读取未写入的EXPIRES_IN值，虽然这不是直接导致用户信息不显示的原因，但会引发认证过期逻辑异常。
4. checkLogin方法的异步逻辑错误：该方法使用异步订阅判断登录状态，导致返回值永远为初始的false，不过这和当前视图问题关联较小，但需要修正。

具体解决方案 #

1. 修正组件订阅逻辑

将订阅移到ngOnInit生命周期钩子中，并在组件销毁时取消订阅，确保订阅正确生效且避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AuthService } from './path-to-auth-service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  isLoggedIn: string; 
  private authSubscription: Subscription;

  constructor(private authService: AuthService) {}

  ngOnInit() {
    // 在组件初始化时建立订阅，确保能接收后续更新
    this.authSubscription = this.authService.dataofIsLoggedIn.subscribe(data => {
      this.isLoggedIn = data;
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，防止内存泄漏
    if (this.authSubscription) {
      this.authSubscription.unsubscribe();
    }
  }
}

2. 优化模板的async管道使用

用ng-container将async管道结果赋值给变量，避免重复订阅，确保视图及时响应用户数据更新：

<div class="VCenterFlex" *ngIf="isLoggedIn">
  <ng-container *ngIf="authService.currentUser | async as currentUser">
    <div class="avatarimageContainer_parent">
      <div class="avatarimageContainer" (click)="router.navigate(['/perfil'])" >
        <!-- 使用Angular属性绑定语法更安全 -->
        <img class="avatarimage" [src]="currentUser?.avatar" />
        <img class="settings_avatar_top" src="../assets/img/settings_icon.png">
      </div>
    </div>
    <h6 style="margin-right: 5px;" *ngIf="currentUser.name"> Hola, {{currentUser.name}}. </h6>
  </ng-container>
  <button (click)="authService.logout()" type="button" mat-raised-button color="accent" >
    <mat-icon>exit_to_app</mat-icon> Cerrar sesión
  </button>
</div>

3. 修复saveToken的过期时间计算

将读取localStorage的逻辑改为使用传入的expiresIn参数，确保过期时间计算正确：

private saveToken(token:string, expiresIn:string, CurrentUser):void{
  this.updateObservableisLoggedIn(token);
  // 修正：使用接口返回的expiresIn参数计算过期时间
  const expiresAt = moment().add(expiresIn, 'second');
  localStorage.removeItem("ACCESS_TOKEN");
  localStorage.removeItem("EXPIRES_IN");
  localStorage.removeItem("currentUser");
  localStorage.setItem("ACCESS_TOKEN", token);
  localStorage.setItem("EXPIRES_IN", JSON.stringify(expiresAt.valueOf()));
  this.token = token;
  this.expiresin = JSON.stringify(expiresAt.valueOf());
  localStorage.setItem("currentUser", JSON.stringify(CurrentUser));
  this.updateObservableUser(<UserI>CurrentUser);
}

4. 修正checkLogin方法逻辑

直接使用BehaviorSubject的value属性获取当前状态，避免异步订阅的错误：

checkLogin():boolean{
  // 直接判断BehaviorSubject的当前值是否存在
  return !!this.isLoggedIn.value;
}

额外优化建议 #

你可以将isLoggedIn改为Observable<boolean>，直接在模板中使用async管道，完全避免手动订阅的麻烦：

// app.component.ts
isLoggedIn$: Observable<boolean>;

ngOnInit() {
  this.isLoggedIn$ = this.authService.dataofIsLoggedIn.pipe(
    map(token => !!token)
  );
}

模板中对应修改为：

<div class="VCenterFlex" *ngIf="isLoggedIn$ | async">
  <!-- 剩余内容不变 -->
</div>

内容的提问来源于stack exchange，提问作者Germán