登录后需刷新页面才显示用户状态问题求助

我有两个<ul>元素，用来根据用户登录状态切换显示。登录后跳转至仪表盘页面时，依然显示未登录状态的第一个<ul>，第二个<ul>必须刷新页面才会显示。登录过程中accountService.currentUser的值为null，刷新页面后该值变为[object Object]，此时第二个<ul>才能正常显示（本应在跳转至仪表盘后就显示）。

相关代码 #

登录组件的登录方法 #

login(): void {
    this.accService.login(this.model).subscribe(
      (result: any) => {
        this.router.navigateByUrl('/dashboard');
      },
      (error: any) => {}
    );
  }

登录服务代码 #

login(model: any): Observable<void> {
    return this.http.post<User>(this.baseUrl + 'login', model).pipe(
      take(1),
      map((response: User) => {
        const user = response;
        
        if (user) {
          this.setCurrentUser(user);
        }
      })
    );
  }

HTML模板代码 #

<ul *ngIf="(accountService.currentUser$ | async) === null">
  <li><a class="listlink" routerLink="user/login">Entrar</a>
  </li>
</ul>
<ul *ngIf="(accountService.currentUser$ | async) != null" class="desktop-ul">
  <li routerLinkActive="active"><a class="listlink" data-page="events" routerLink="events/list">Eventos</a>
  </li>
</ul>

HTTP拦截器代码 #

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

let currentUser: User;

this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
  currentUser = user;

  if (currentUser) {
    request = request.clone(
      {
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}`
        }
      }
    );
  }
});

return next.handle(request);
}

问题原因及修复方案 #

核心问题 #

1. currentUser$未使用能推送当前值的Subject类型，导致导航后组件无法立即获取更新后的用户状态
2. 拦截器中异步订阅的写法错误，会导致请求先于用户信息设置完成
3. HTML模板重复订阅currentUser$，可能引发不必要的性能问题

具体修复步骤 #

1. 确保currentUser$基于BehaviorSubject实现

在accountService中，用BehaviorSubject初始化用户状态源，确保新订阅的组件能立即拿到最新值：

import { BehaviorSubject } from 'rxjs';

private currentUserSource = new BehaviorSubject<User | null>(null);
currentUser$ = this.currentUserSource.asObservable();

setCurrentUser(user: User): void {
  localStorage.setItem('user', JSON.stringify(user));
  // 推送更新后的用户状态
  this.currentUserSource.next(user);
}

2. 调整登录方法，确保状态更新后再导航

登录方法中直接在login流完成后导航即可，因为map操作中已经同步完成了setCurrentUser：

login(): void {
  this.accService.login(this.model).subscribe({
    next: () => this.router.navigateByUrl('/dashboard'),
    error: () => {}
  });
}

3. 修复拦截器的异步逻辑问题

拦截器中不能用同步变量接收异步订阅的值，改用pipe操作符串联逻辑：

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  return this.accountService.currentUser$.pipe(
    take(1),
    switchMap(user => {
      if (user) {
        request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${user.token}`
          }
        });
      }
      return next.handle(request);
    })
  );
}

4. 优化HTML模板的订阅逻辑

用ng-container合并订阅，避免重复订阅currentUser$：

<ng-container *ngIf="accountService.currentUser$ | async as currentUser">
  <ul *ngIf="!currentUser">
    <li><a class="listlink" routerLink="user/login">Entrar</a></li>
  </ul>
  <ul *ngIf="currentUser" class="desktop-ul">
    <li routerLinkActive="active"><a class="listlink" data-page="events" routerLink="events/list">Eventos</a></li>
  </ul>
</ng-container>

内容的提问来源于stack exchange，提问作者Antônio F. Aires