Angular登录后登录/注册链接未自动隐藏问题求助

我通过调用/api/status接口（携带HttpOnly Cookie的GET请求）判断用户登录状态，登录时接口会返回userid，期望Angular自动隐藏登录/注册链接，但目前登录后链接不会自动消失，必须刷新页面才会隐藏。

现有实现代码 #

HeaderComponent类代码 #

export class HeaderComponent implements OnInit {
  authService = inject(AuthService)

  isLoggedIn$ = new BehaviorSubject<Boolean>(false);

  authenticationStatus!: Observable<HttpResponse<object>>;

  constructor() {
    this.authenticationStatus = this.authService.authStatus()

  }
  ngOnInit(): void {
    this.authenticationStatus.subscribe({
      next: (res: any) => {
        if (res.body) {
          const userId = res.body.message;
          console.log("User ID: ", userId);
          this.isLoggedIn$.next(true)
          console.log(this.isLoggedIn$.value);
        } else this.isLoggedIn$.next(false)
      },
      error: (err) => {
        console.log(err)
        this.isLoggedIn$.next(false)
      }
    });
  }
}

AuthService中的authStatus方法 #

authStatus() : Observable<HttpResponse>{
return this.http.get(`${apiUrls.authServiceApi}/status`,
{ observe: 'response', withCredentials: true });
}

模板代码 #

<ng-container *ngIf="!isLoggedIn$.value">
      <span
        [routerLink]="['/login']"
        routerLinkActive="router-link-active"
        class="text-xl cursor-pointer text-gray-200 font-bold m-3 hover:underline hover:text-indigo-200"
        >Login</span
      >
      <span
        [routerLink]="['/register']"
        routerLinkActive="router-link-active"
        class="text-xl cursor-pointer text-gray-200 font-bold m-3 hover:underline hover:text-indigo-200"
        >Register</span
      >
</ng-container>

问题根源 #

1. authStatus()仅在组件初始化时调用一次，登录操作完成后没有重新触发接口请求更新状态
2. 模板直接访问isLoggedIn$.value，无法自动触发Angular变更检测，导致视图不更新

修复方案 #

1. 实现登录后自动刷新状态 #

修改AuthService，添加状态刷新触发机制，让登录成功后能重新拉取登录状态：

import { Subject } from 'rxjs';
import { switchMap, startWith } from 'rxjs/operators';

// AuthService内部新增
private statusRefresh$ = new Subject<void>();

authStatus(): Observable<HttpResponse<object>> {
  return this.statusRefresh$.pipe(
    startWith(void 0), // 初始化时自动触发一次请求
    switchMap(() => 
      this.http.get(`${apiUrls.authServiceApi}/status`, { 
        observe: 'response', 
        withCredentials: true 
      })
    )
  );
}

// 登录成功后调用此方法刷新状态
refreshAuthStatus() {
  this.statusRefresh$.next();
}

在登录组件的登录成功回调中调用刷新方法：

// 示例登录组件逻辑
login(credentials: {username: string, password: string}) {
  this.authService.login(credentials).subscribe({
    next: () => {
      this.authService.refreshAuthStatus();
      // 其他登录成功逻辑（如跳转首页）
    }
  });
}

2. 模板改用async管道自动更新视图 #

模板直接访问.value无法触发变更检测，改用async管道可以自动订阅Observable并同步视图：

简化HeaderComponent的状态逻辑：

import { map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

export class HeaderComponent implements OnInit {
  authService = inject(AuthService);

  isLoggedIn$!: Observable<boolean>;

  ngOnInit(): void {
    this.isLoggedIn$ = this.authService.authStatus().pipe(
      map(res => !!res.body?.message), // 根据接口返回判断登录状态
      catchError(() => of(false)) // 请求失败时默认未登录
    );
  }
}

修改模板代码：

<ng-container *ngIf="!(isLoggedIn$ | async)">
      <span
        [routerLink]="['/login']"
        routerLinkActive="router-link-active"
        class="text-xl cursor-pointer text-gray-200 font-bold m-3 hover:underline hover:text-indigo-200"
        >Login</span
      >
      <span
        [routerLink]="['/register']"
        routerLinkActive="router-link-active"
        class="text-xl cursor-pointer text-gray-200 font-bold m-3 hover:underline hover:text-indigo-200"
        >Register</span
      >
</ng-container>

3. 可选优化：避免内存泄漏 #

如果保留手动订阅逻辑，需在组件销毁时取消订阅：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class HeaderComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  // ... 其他代码

  ngOnInit(): void {
    this.authenticationStatus.pipe(
      takeUntil(this.destroy$)
    ).subscribe({
      // 原有订阅逻辑
    });
  }

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

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