登录完成后如何将isLogin设为true？Angular状态同步问题

问题背景 #

登录完成后无法在app.component.ts中获取isLogin布尔值，尝试过@Output EventEmitter但无效——因为LoginComponent并非通过AppComponent模板中的选择器直接引入，而是通过路由或弹窗加载，导致事件无法传递。需求是登录成功后将isLogin设为true，让*ngIf渲染business-cockpit组件。

解决方案：用共享服务管理全局登录状态 #

在Angular中，跨非父子组件共享状态的标准方案是使用共享服务+BehaviorSubject，以下是具体实现步骤：

1. 创建Auth状态管理服务 #

首先生成一个全局服务来管理登录状态：

ng generate service auth

修改auth.service.ts代码：

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // 用BehaviorSubject保存登录状态，初始值为未登录
  private isLoginSubject = new BehaviorSubject<boolean>(false);
  // 对外暴露只读的可观察对象，避免外部直接修改状态
  isLogin$: Observable<boolean> = this.isLoginSubject.asObservable();

  constructor() {
    // 页面刷新时从localStorage恢复登录状态（可选，防止刷新丢失状态）
    const savedStatus = localStorage.getItem('isLogin');
    if (savedStatus === 'true') {
      this.setLoginStatus(true);
    }
  }

  // 设置登录状态的方法
  setLoginStatus(status: boolean): void {
    this.isLoginSubject.next(status);
    // 持久化到localStorage
    localStorage.setItem('isLogin', status.toString());
  }
}

2. 修改LoginComponent，登录成功后更新状态 #

删除原有的@Output相关代码，注入Auth服务并在登录成功时调用状态更新方法：

// login.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { MatDialogRef } from '@angular/material/dialog';
import { SnackbarService } from 'src/app/shared/snackbar.service';
import { MatDialog } from '@angular/material/dialog';
import { CommonHttpService } from 'src/app/business-cockpit/services/common-http.service';
import { BusinessDialogComponent } from 'src/app/business-cockpit/business-dialog/business-dialog.component';
import { AuthService } from 'src/app/auth.service'; // 引入Auth服务

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  hide = true;
  username: string = "";
  password: string = "";

  constructor(
    private commonHttpService: CommonHttpService,
    public dialogRef: MatDialogRef<LoginComponent>,
    private router: Router, 
    private snackBarService: SnackbarService, 
    public dialog: MatDialog,
    private authService: AuthService // 注入Auth服务
  ) { }

  ngOnInit(): void { }

  login() {
    const payload = {
      username: this.username,
      password: this.password
    };

    this.commonHttpService
      .create('/public/login', payload)
      .subscribe((response: any) => {
        if (response.user.businessId == null) {
          this.dialog.open(BusinessDialogComponent, { disableClose: true });  
        }
        this.dialogRef.close();
        this.router.navigateByUrl('/business-home');
        // 登录成功后设置全局登录状态
        this.authService.setLoginStatus(true);
      });
  }
}

3. 修改AppComponent，订阅登录状态变化 #

在AppComponent中订阅Auth服务的状态流，同步本地isLogin变量：

// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { AuthService } from './auth.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  isLogin = false;
  title = 'business-manager-ui';
  private loginStatusSubscription!: Subscription;

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
    // 订阅登录状态变化，实时更新本地变量
    this.loginStatusSubscription = this.authService.isLogin$.subscribe(status => {
      this.isLogin = status;
    });
  }

  ngOnDestroy(): void {
    // 销毁订阅，防止内存泄漏
    this.loginStatusSubscription.unsubscribe();
  }
}

4. 可选优化：添加路由守卫（防止未登录访问受保护页面） #

如果需要限制未登录用户访问business-home等页面，可以添加路由守卫：

ng generate guard auth

修改auth.guard.ts：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { take } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  async canActivate(): Promise<boolean> {
    const isLoggedIn = await this.authService.isLogin$.pipe(take(1)).toPromise();
    if (!isLoggedIn) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

在路由配置中应用守卫：

// app-routing.module.ts
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  // 给受保护路由添加守卫
  { path: 'business-home', component: BusinessHomeComponent, canActivate: [AuthGuard] },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

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