Angular登录后导航栏未更新认证状态问题排查

使用NX Monorepo（Angular/NestJS）开发时，登录组件完成登录后，位于不同lib中的导航栏无法实时显示用户名和Logout按钮，仅在页面刷新后才正常显示。导航栏订阅的currentUser$仅在刷新时触发，登录状态变更时无响应。

AuthService核心代码 #

private isAuthenticatedSubject = new BehaviorSubject<boolean>(this.hasToken());

private currentUserSubject = new BehaviorSubject<{
  username: string;
  roles: string[];
}>(this.getUserFromToken());

isAuthenticated$: Observable<boolean> = this.isAuthenticatedSubject.asObservable();
currentUser$: Observable<{ username: string; roles: string[] }> = this.currentUserSubject.asObservable();

public login(username: string, password: string): Observable<any> {
  return this.http.post(`${this.apiURL}/login`, { username, password }).pipe(
    tap((response: any) => {
      if (response.token) {
        this.onLoginHandle(response.token);
      }
    })
  );
}

public onLoginHandle(token: string) {
  localStorage.setItem('token', token);
  this.isAuthenticatedSubject.next(true);

  of(null)
    .pipe(
      delay(0), // Small delay to ensure token is set
      tap(() => {
        const user = this.getUserFromToken();
        this.currentUserSubject.next(user);
        this.router.navigate(['../']);
      })
    )
    .subscribe();
}

private getUserFromToken() {
  const token = localStorage.getItem('token');
  if (token) {
    const decodedToken: any = jwt_decode.jwtDecode(token);
    return {
      username: decodedToken.user,
      roles: decodedToken.roles || [],
    };
  } else {
    return {
      username: '',
      roles: [],
    };
  }
}

导航栏组件核心代码 #

public username: string;
public isLoggedIn: boolean = false;

constructor(
  public authService: AuthService,
  private cdr: ChangeDetectorRef
) {}

ngOnInit(): void {
  this.isAuthenticatedSub = this.authService.isAuthenticated$.subscribe(
    (isAuthenticated) => {
      this.isLoggedIn = isAuthenticated;
    }
  );

  this.currentUsersub = this.authService.currentUser$.subscribe({
    next: (user) => {
      console.log('Received user data in navbar:', user);
      this.username = user.username;
      this.cdr.detectChanges();
    },
    error: (error: HttpErrorResponse): void => {
      console.error('Error receiving user data:', error);
    },
  });
}

问题根源 #

最可能的原因是AuthService没有在整个应用中保持单例。在NX Monorepo的Angular lib中，如果每个lib都在自己的providers数组中声明了AuthService，会导致登录组件和导航栏组件注入的是两个不同的服务实例：登录时更新的是登录组件所在lib的AuthService实例的Subject，而导航栏订阅的是自己lib的AuthService实例的Subject，自然收不到更新。

另外，onLoginHandle中的delay(0)属于冗余操作，localStorage.setItem是同步操作，不需要延迟就能读取到token。

解决方案 #

1. 确保AuthService是全局单例 #

修改AuthService的装饰器，直接指定providedIn: 'root'，让服务在整个应用中保持唯一实例：

@Injectable({
  providedIn: 'root' // 全局单例，整个应用共享同一个实例
})
export class AuthService {
  // ... 现有代码
}

如果是通过lib模块提供服务，确保不要在其他lib的模块中重复声明AuthService为provider，只在共享lib的模块中提供，其他lib通过导入该共享模块来使用服务。

2. 移除冗余的delay(0)优化代码 #

localStorage.setItem是同步API，写入后立即可以读取，简化onLoginHandle：

public onLoginHandle(token: string) {
  localStorage.setItem('token', token);
  const user = this.getUserFromToken();
  this.isAuthenticatedSubject.next(true);
  this.currentUserSubject.next(user);
  this.router.navigate(['../']);
}

3. 简化导航栏组件的订阅（可选） #

使用Angular的async管道替代手动订阅，自动处理变更检测和订阅管理：
在导航栏模板中：

<!-- 显示用户名 -->
<span *ngIf="authService.currentUser$ | async as user">{{ user.username }}</span>
<!-- Logout按钮 -->
<button *ngIf="authService.isAuthenticated$ | async" (click)="logout()">Logout</button>

组件代码中移除手动订阅：

constructor(public authService: AuthService) {}

// 无需ngOnInit中的订阅代码，async管道会自动处理

这样既避免了内存泄漏风险，也不需要手动调用cdr.detectChanges()。

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