Angular 5：认证服务每次加载组件时重复初始化问题

看起来你遇到的是Angular服务实例化的经典问题——服务被多次创建导致状态不共享，我来帮你捋清楚怎么解决：

核心原因：服务的提供位置错了 #

Angular中服务默认是单例，但如果在组件的providers数组里声明了服务，Angular会为每个组件实例创建一个全新的服务副本。这就是为什么每次加载AuthComponent时，AuthService都会被重新初始化，根组件和AuthComponent用的根本不是同一个服务实例，它们的Subject自然也没法共享状态。

修复步骤 #

1. 确保AuthService是全局单例 #

把AuthService的提供逻辑放在模块层面，而不是组件里：

• 对于Angular 5（没有providedIn: 'root'语法），打开AppModule，在providers数组里添加AuthService：

// app.module.ts
import { AuthService } from './auth.service';

@NgModule({
  declarations: [AppComponent, AuthComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [AuthService], // 在这里提供，全局单例
  bootstrap: [AppComponent]
})
export class AppModule {}

• 注意：绝对不要在AuthComponent或者其他组件的@Component装饰器的providers数组里添加AuthService！

2. 用BehaviorSubject替代Subject（更稳妥） #

你的需求是广播用户认证状态，Subject有个小问题：新订阅者不会收到当前的最新值，只有订阅之后的next()事件才会触发。换成BehaviorSubject的话，它会把当前的最新值自动发给新订阅的组件，这样AuthComponent加载时能立刻拿到当前的认证状态，不用等新的事件。

修改AuthService的实现：

// auth.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AuthService {
  // 初始化默认值为false，根据你的需求调整
  private isAuthenticated$ = new BehaviorSubject<boolean>(false);
  // 对外暴露可观察对象，避免外部直接修改Subject
  public authStatus$: Observable<boolean> = this.isAuthenticated$.asObservable();

  constructor(private http: HttpClient) {}

  // 根组件调用的检查会话方法
  checkCurrentSession() {
    this.http.get('/api/check-auth-status').subscribe(
      (response: { isAuthenticated: boolean }) => {
        // 更新认证状态
        this.isAuthenticated$.next(response.isAuthenticated);
      },
      () => {
        // 请求失败时默认设为未认证
        this.isAuthenticated$.next(false);
      }
    );
  }

  // 登录成功后更新状态
  login(credentials: any) {
    return this.http.post('/api/login', credentials).subscribe(() => {
      this.isAuthenticated$.next(true);
    });
  }

  // 登出后更新状态
  logout() {
    this.http.post('/api/logout', {}).subscribe(() => {
      this.isAuthenticated$.next(false);
    });
  }
}

3. 根组件初始化认证状态 #

在AppComponent的ngOnInit里调用检查会话的方法，确保应用启动时就获取当前认证状态：

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

@Component({
  selector: 'app-root',
  template: `
    <app-auth></app-auth>
    <!-- 其他组件 -->
  `
})
export class AppComponent implements OnInit {
  constructor(private authService: AuthService) {}

  ngOnInit() {
    // 应用启动时检查会话
    this.authService.checkCurrentSession();
  }
}

4. AuthComponent订阅状态 #

在AuthComponent里订阅authStatus$，获取实时的认证状态：

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

@Component({
  selector: 'app-auth',
  template: `
    <div *ngIf="isAuthenticated">
      欢迎回来！<button (click)="authService.logout()">登出</button>
    </div>
    <div *ngIf="!isAuthenticated">
      <input type="text" placeholder="用户名">
      <input type="password" placeholder="密码">
      <button (click)="login()">登录</button>
    </div>
  `
  // 这里绝对不要加providers: [AuthService]！！！
})
export class AuthComponent implements OnInit {
  isAuthenticated: boolean;

  constructor(public authService: AuthService) {}

  ngOnInit() {
    // 订阅认证状态变化
    this.authService.authStatus$.subscribe(status => {
      this.isAuthenticated = status;
    });
  }

  login() {
    // 这里写登录逻辑，调用authService.login()
  }
}

额外排查点 #

如果你的应用用了懒加载模块，要确保懒加载模块的providers里没有添加AuthService，否则会创建新的服务实例。如果必须在懒加载模块里用到AuthService，直接注入即可，不用重复提供。

内容的提问来源于stack exchange，提问作者Måns Thörnvik