Angular 4.3 Interceptor无法正常工作

Question

我尝试使用新的Angular 4.3拦截器为所有请求设置authorithation标头.但是,它不起作用.我将断点设置为拦截器intercept方法,浏览器没有命中它,所以它似乎angular只是忽略了我的拦截器.请帮助我,提前谢谢.

user.service.ts:

import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
import {Observable} from "rxjs";
import {Http} from "@angular/http";

@Injectable()
export class UserService {

  constructor(public http: Http) {
  }

  public getContacts(): Observable<any[]> {
    return this.http.get('/users/contacts').map(contacts => contacts.json());
  }
}

token.interceptor.ts

import {Injectable} from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {AuthService} from "./shared/auth.service";

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}

app.module.ts:

@NgModule({
  ...
  providers: [
    ...
    {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
  ]
})

Answer 1

TL; DR 确保整个应用程序中有一个HttpClientModule导入(推荐)或为每个导入提供有效的拦截器配置(ofc仅用于测试).

确保不会在应用程序的不同模块中多次导入HttpClientModule.我在延迟加载的模块中导入它.每次导入都会使用导入模块中的配置创建HttpClient的新副本,因此将覆盖根模块中提供的拦截器.

Answer 2

原因 - 您使用旧Http服务而不是新服务,引入Angular 4.3- HttpClient(Http将被弃用).此外,HttpClient默认情况下,在JSON响应类型中,您应该省略.map(contacts => contacts.json()).

app.module.ts

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   HttpClientModule,
   ...
 ],
 providers: [
   ...
   {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
 ]
 ...
})

user.service.ts

...
import {HttpClient} from "@angular/common/http";

@Injectable()
export class UserService {

  constructor(public http: HttpClient) {
  }

  public getContacts(): Observable<any[]> {
    return this.http.get('/users/contacts');
  }
}