Ionic 3中Token拦截器的navCtrl与RxJS do操作符报错问题排查

我来帮你逐个分析这两个错误的原因和修复方案：

1. do方法的红线错误 #

原因 #

你使用的是RxJS 6+版本，这个版本已经将原来的do操作符重命名为tap，并且所有操作符都需要通过pipe()方法调用，不再支持RxJS 5那种直接链式调用.do()的写法。

修复步骤 #

• 首先在文件顶部导入tap操作符：

import { switchMap, tap } from 'rxjs/operators';

• 把原来的.do(...)替换成.pipe(tap(...))，修改后的代码片段：

return next.handle(_req).pipe(
  tap(
    (event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // 这里可以处理响应逻辑
      }
    },
    (err: any) => {
      if (err instanceof HttpErrorResponse) {
        if (err.status === 401) {
          // 跳转到登录页的逻辑
        }
      }
    }
  )
);

2. navCtrl的红线错误 #

原因 #

你没有在TokenInterceptor的构造函数中注入NavController实例，所以无法直接调用this.navCtrl。另外在Ionic 3的全局服务（比如拦截器）中直接注入NavController可能会出现无法获取当前活跃导航实例的问题，更稳妥的方式是通过App组件来获取导航控制器。

修复步骤 #

• 首先导入App组件：

import { App } from 'ionic-angular';

• 在构造函数中注入App（同时可以把你导入的AlertController、LoadingController也一起注入，如果后续需要用到的话）：

constructor(
  private tokenProvider: TokenProvider,
  private app: App,
  private alertCtrl: AlertController,
  private loadingCtrl: LoadingController
) {}

• 替换原来的跳转代码，使用App获取活跃导航后跳转（推荐用setRoot替代push，避免用户后退到过期状态的页面）：

if (err.status === 401) {
  // 清空导航栈并跳转到登录页
  this.app.getActiveNav().setRoot('LoginPage');
  // 可选：弹出提示告知用户token过期
  const alert = this.alertCtrl.create({
    title: '登录过期',
    subTitle: '您的登录状态已过期，请重新登录',
    buttons: ['确定']
  });
  alert.present();
}

额外提示 #

你的代码里还有一个拼写错误：headersConfig['Authorization'] = beader ${token}; 这里的beader应该是Bearer，这个错误不会导致红线，但会使你的授权请求无效，记得修正它：

headersConfig['Authorization'] = `Bearer ${token}`;

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