Angular中如何让app.component感知用户登录/登出状态变化

当前代码的核心问题是：app.component的session变量仅在组件初始化时读取一次localStorage，后续localStorage的变更无法触发组件的变更检测，导致UI不会自动更新。以下是三种可行的解决方案：

方案一：使用服务+BehaviorSubject（推荐，Angular最佳实践） #

通过全局共享服务管理登录状态，能优雅实现跨组件的状态同步。

1. 创建全局Auth服务

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private isLoggedInSubject = new BehaviorSubject<boolean>(false);
  isLoggedIn$: Observable<boolean> = this.isLoggedInSubject.asObservable();

  constructor() {
    // 初始化时从localStorage加载状态
    const loggedIn = localStorage.getItem('isloggedin') === 'true';
    this.isLoggedInSubject.next(loggedIn);
  }

  // 登录后更新状态
  login() {
    localStorage.setItem('isloggedin', 'true');
    this.isLoggedInSubject.next(true);
  }

  // 登出后更新状态
  logout() {
    localStorage.removeItem('isloggedin');
    this.isLoggedInSubject.next(false);
  }
}

2. 修改LoginComponent的登录方法

constructor(private authService: AuthService, private router: Router) {}

UserLogin() {
  this.submitted = true;
  if(this.loginForm.invalid) {
    this.authService.logout();
    return;
  }
  const data = { userName: this.loginForm.value.userName, txtemail: this.loginForm.value.txtEmail };
  localStorage.setItem("userinfo", JSON.stringify(data));
  this.authService.login(); // 通过服务同步登录状态
  this.router.navigate(['/home']);
}

3. 改造AppComponent

• app.component.ts：

import { AuthService } from './auth.service';
import { Observable } from 'rxjs';

export class AppComponent {
  isLoggedIn$: Observable<boolean>;

  constructor(private authService: AuthService) {
    this.isLoggedIn$ = this.authService.isLoggedIn$;
  }
}

• app.component.html：

<div *ngIf="isLoggedIn$ | async; else NoUserTemplete">
  <app-app-navigation-bar-admin></app-app-navigation-bar-admin>
</div>
<ng-template #NoUserTemplete>
  <app-navigation-bar></app-navigation-bar>
</ng-template>

方案二：监听浏览器storage事件+路由事件 #

适合简单场景，无需额外服务，但需处理当前标签页的状态同步。

修改AppComponent：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

export class AppComponent {
  session: string;

  constructor(private router: Router) {
    this.session = localStorage.getItem('isloggedin');
    
    // 监听其他标签页的localStorage变更
    window.addEventListener('storage', (event) => {
      if (event.key === 'isloggedin') {
        this.session = event.newValue;
      }
    });

    // 监听当前标签页路由跳转完成，同步最新状态
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.session = localStorage.getItem('isloggedin');
    });
  }
}

方案三：将session改为Getter属性 #

让session每次访问时都从localStorage读取，利用Angular变更检测自动更新UI：

修改AppComponent：

export class AppComponent {
  get session(): string {
    return localStorage.getItem('isloggedin');
  }
}

这种方式实现最简单，但每次变更检测都会读取localStorage，性能略逊于前两种方案，适合小型应用。

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