Angular 4升级后，HttpInterceptor中服务内401响应重定向问题

我完全理解你的困扰——HttpInterceptor是全局服务，直接注入NavController肯定会报错，因为NavController依赖于组件的上下文，没法在服务层面直接获取。不过有两种靠谱的解决方案，取决于你是纯Angular项目还是Ionic项目：

方案一：使用Angular原生Router（推荐纯Angular项目） #

Angular的Router是全局可注入的服务，完全适合在Interceptor里用来做重定向操作。具体步骤如下：

1. 创建AuthInterceptor并注入Router #

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private router: Router) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 先清除本地存储的认证信息（比如token），避免后续请求重复触发401
          localStorage.removeItem('authToken');
          // 重定向到登录页面，这里的路由路径根据你的项目配置调整
          this.router.navigate(['/login']);
        }
        // 记得把错误重新抛出，让其他可能的错误处理逻辑能捕获到
        return throwError(error);
      })
    );
  }
}

2. 在AppModule中注册Interceptor #

要让Interceptor生效，必须在根模块的providers数组里注册它：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许注册多个Interceptor，非常重要
    }
  ]
})
export class AppModule {}

方案二：全局导航服务（适合Ionic项目） #

如果你是用Ionic开发，习惯用NavController来管理页面跳转，可以创建一个全局的导航服务来传递NavController的实例：

1. 创建全局NavService #

import { Injectable } from '@angular/core';
import { NavController } from 'ionic-angular';

@Injectable()
export class NavService {
  private navCtrl: NavController;

  // 从根组件注入NavController并保存
  setNavController(nav: NavController) {
    this.navCtrl = nav;
  }

  // 提供给Interceptor获取NavController实例
  getNavController() {
    return this.navCtrl;
  }
}

2. 在AppComponent中初始化NavService #

在你的根组件（通常是MyApp）里，把当前的NavController实例传给NavService：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NavService } from './nav.service';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  constructor(public navCtrl: NavController, private navService: NavService) {
    // 初始化全局导航服务
    this.navService.setNavController(navCtrl);
  }
}

3. 在Interceptor中使用NavService跳转 #

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { NavService } from './nav.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private navService: NavService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          localStorage.removeItem('authToken');
          const navCtrl = this.navService.getNavController();
          // 使用Ionic的setRoot方法跳转到登录页，避免页面栈混乱
          navCtrl.setRoot('LoginPage');
        }
        return throwError(error);
      })
    );
  }
}

几个关键注意点 #

• 处理401时一定要清除本地的认证信息，不然后续请求会带着无效的token，导致无限循环触发401重定向。
• 如果你的项目中有多个Interceptor，注意注册顺序——AuthInterceptor通常应该放在靠前的位置，确保认证相关的逻辑优先执行。
• 不要忘记重新抛出错误，否则其他依赖错误流的逻辑会失效。

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