Angular路由跳转后旧组件ngOnInit中API请求重复执行问题

问题场景 #

现有代码结构及逻辑如下：

• signin.component.ts的ngOnInit中直接调用metaService.getMetaCompany()接口
• app.component.ts的ngOnInit仅在用户已认证时调用该接口
• 路由采用懒加载配置，跳转逻辑包含「登出跳转登录页」「登录后跳转目标页」两种场景

问题现象：

1. 登录后跳转其他页面时，app.component和signin.component的API请求同时执行，出现重复请求
2. 登出跳转登录页时，之前的已认证页面组件（如inbox、work）的ngOnInit中API请求仍会触发，因用户已登出导致接口报错

解决方案 #

1. 组件销毁时手动取消订阅 #

Angular组件销毁后，未取消的Observable订阅会继续执行，导致请求残留。需在组件中保存订阅实例，在ngOnDestroy生命周期钩子中终止订阅：

修改signin.component.ts：

import { Subscription } from 'rxjs';

private metaSub!: Subscription;

ngOnInit() {
  this.metaSub = this.metaService.getMetaCompany().subscribe((response: Json) => {
    console.log('meta company');
  });
}

ngOnDestroy() {
  this.metaSub?.unsubscribe();
}

同理，所有包含API调用的已认证页面组件（如inbox、work组件）都需要添加该逻辑，确保组件销毁时终止未完成的请求。

2. 用路由守卫拦截未登录请求 #

针对登出跳转时旧组件执行API的问题，使用CanActivate守卫在进入组件前校验登录状态，未登录时直接跳转登录页，阻止组件初始化：

步骤1：创建登录守卫

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service'; // 替换为你的认证服务

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

  canActivate(): boolean {
    if (this.authService.isAuthenticated()) { // 替换为你的登录状态判断逻辑
      return true;
    }
    this.router.navigate(['signin']);
    return false;
  }
}

步骤2：为需要认证的路由添加守卫

const routes: Routes = [
  { path: 'signin', loadChildren: () => import('./signin/signin.module').then(m => m.SignInModule) },
  { path: 'inbox', loadChildren: () => import('./inbox/inbox.module').then(m => m.InboxModule), canActivate: [AuthGuard] },
  { path: 'work', loadChildren: () => import('./work/work.module').then(m => m.WorkModule), canActivate: [AuthGuard] },
  { path: 'something-went-wrong', component: InternalServerErrorComponent },
  { path: '**', component: PageNotFoundComponent }
];

未登录状态下，用户无法进入需要认证的页面，自然不会触发这些组件的ngOnInit逻辑。

3. 优化根组件API调用时机 #

app.component作为根组件仅初始化一次，建议监听登录状态变化，而非仅在ngOnInit执行一次：

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

private authSub!: Subscription;

ngOnInit() {
  this.authSub = this.authService.authState$.subscribe(authenticated => {
    if (authenticated) {
      this.metaService.getMetaCompany().subscribe((response: Json) => {
        console.log('meta company');
      });
    }
  });
}

ngOnDestroy() {
  this.authSub?.unsubscribe();
}

通过监听登录状态流，确保仅在用户登录成功后触发元数据请求，避免和其他组件的请求重复。

4. 用takeUntil统一管理订阅 #

若组件存在多个Observable订阅，可使用takeUntil操作符统一处理销毁逻辑，减少手动取消订阅的冗余代码：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private destroy$ = new Subject<void>();

ngOnInit() {
  this.metaService.getMetaCompany()
    .pipe(takeUntil(this.destroy$))
    .subscribe((response: Json) => {
      console.log('meta company');
    });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

内容的提问来源于stack exchange，提问作者A. Gladkiy