Angular登录后页面未自动刷新最新信息问题求助

问题背景 #

开发首个Angular登录功能，登录成功后跳转至GiveDashboardComponent，导航栏需从“登录”按钮切换为“退出”按钮，退出时反向切换，但状态变更仅在手动刷新页面后才生效，需排查问题并给出正确实现方式。

现有代码 #

LoginComponent #

export class LoginComponent implements OnInit {
  user: User = new User();
  errorMessage: string = '';

  constructor(
    private authService: AuthenticationService,
    private router: Router,
    public sharedService: SharedService
  ) {}

  ngOnInit(): void {
    if (this.authService.currentUserValue?.id) {
      this.router.navigate(['/give-dashboard']);
    }
  }

  exit() {
    this.sharedService.showLoginComponent = false;
  }

  login() {
    this.authService.login(this.user).subscribe(
      (data) => {
        this.router.navigate(['/give-dashboard']);
      },
      (err) => {
        this.errorMessage = 'Username or password is incorrect.';
        console.log(err);
      }
    );
  }
}

导航栏组件（NavBarComponent） #

export class NavBarComponent implements OnInit {
  isLoggedIn = false;
  user: User = new User();

  constructor(
    private router: Router,
    private authService: AuthenticationService,
    private sharedService: SharedService
  ) {}

  ngOnInit(): void {
    this.authService.loggedUser.subscribe((res) => {
      if (res) {
        this.isLoggedIn = true;
      } else {
        this.isLoggedIn = false;
      }
    });
  }
  showLogin() {
    this.sharedService.showLoginComponent = true;
  }

  logout() {
    this.authService.logout();
    this.router.navigate(['']);
    this.isLoggedIn = false;
  }
}

Dashboard组件（GiveDashboardComponent） #

export class GiveDashboardComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.navigate(['/give-dashboard']);
  }
}

AuthenticationService #

export class AuthenticationService {
  public currentUser: Observable<User>;
  private currentUserSubject: BehaviorSubject<User>;
  private isLoggedIn = new BehaviorSubject<boolean>(this.userIsLoggedIn());
  public loggedUser = this.isLoggedIn.asObservable();

  constructor(private http: HttpClient) {
    let storageUser;
    const storageUserAsStr = localStorage.getItem('currentUser');
    if (storageUserAsStr) {
      storageUser = JSON.parse(storageUserAsStr);
    }
    this.currentUserSubject = new BehaviorSubject<User>(storageUser);
    this.currentUser = this.currentUserSubject.asObservable();
  }

  public get currentUserValue(): User {
    return this.currentUserSubject.value;
  }

  login(user: User): Observable<any> {
    return this.http.post<User>(API_URL + '/sign-in', user).pipe(
      map((res) => {
        if (res) {
          // set session-user
          this.setSessionUser(res);
        } else {
          return false;
        }
        return res;
      })
    );
  }

  register(user: User): Observable<any> {
    return this.http.post<User>(API_URL + '/sign-up', user).pipe(
      map((res) => {
        if (res) {
          this.setSessionUser(res);
        } else {
          return false;
        }
        return res;
      })
    );
  }

  setSessionUser(user: User) {
    localStorage.setItem('currentUser', JSON.stringify(user));
    this.currentUserSubject.next(user);
  }

  logout() {
    localStorage.removeItem('currentUser');
    this.currentUserSubject.next(new User());
    // this.currentUserSubject.next(null);
  }
  refreshToken(): Observable<any> {
    return this.http.post(
      API_URL + '/refresh-token?token=' + this.currentUserValue?.refreshToken,
      {}
    );
  }

  userIsLoggedIn() {
    return !!localStorage.getItem('currentUser');
  }
}

问题根源与解决方法 #

1. 核心问题 #

AuthenticationService中维护了两个独立的状态源：currentUserSubject和isLoggedIn BehaviorSubject，但登录、登出时仅更新了currentUserSubject，未同步更新isLoggedIn的值，导致导航栏订阅的loggedUser流无法收到状态变化通知，只有刷新页面时isLoggedIn的初始值才会重新计算。

2. 修复步骤 #

步骤1：同步更新isLoggedIn状态

修改AuthenticationService中的setSessionUser和logout方法，在更新currentUserSubject的同时推送isLoggedIn状态：

setSessionUser(user: User) {
  localStorage.setItem('currentUser', JSON.stringify(user));
  this.currentUserSubject.next(user);
  // 同步推送登录状态
  this.isLoggedIn.next(true);
}

logout() {
  localStorage.removeItem('currentUser');
  this.currentUserSubject.next(new User());
  // 同步推送未登录状态
  this.isLoggedIn.next(false);
}

步骤2：移除导航栏冗余代码

NavBarComponent的logout方法中无需手动设置this.isLoggedIn = false，订阅loggedUser会自动更新该值，删除该行：

logout() {
  this.authService.logout();
  this.router.navigate(['']);
  // 移除冗余代码：this.isLoggedIn = false;
}

步骤3：优化Dashboard组件

GiveDashboardComponent的ngOnInit中无需重复跳转到自身，删除冗余逻辑：

export class GiveDashboardComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    // 移除冗余代码：this.router.navigate(['/give-dashboard']);
  }
}

步骤4：可选优化——统一状态源

可以删除isLoggedIn相关代码，仅通过currentUserSubject判断登录状态，减少冗余：

• 在AuthenticationService中删除isLoggedIn和loggedUser相关代码
• 修改NavBarComponent的ngOnInit：

ngOnInit(): void {
  this.authService.currentUser.subscribe((user) => {
    this.isLoggedIn = !!user?.id; // 根据用户ID是否存在判断登录状态
  });
}

3. 验证效果 #

修复后，登录、登出操作会实时推送状态变化给导航栏，无需刷新页面即可自动切换“登录/退出”按钮。

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