javascript - example - Angular 4.3 Interceptor no funciona

interceptor httpclient angular 5

Question

Intento usar nuevos interceptores Angular 4.3 para configurar el encabezado de autorización para todas las solicitudes. Sin embargo, no está funcionando. Establecí el punto de interrupción en el método de interceptación de intercept y el navegador no lo golpeó, por lo que parece que angular simplemente ignora mi interceptor. Por favor, ayúdenme, gracias de antemano.

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

El motivo es que utiliza el antiguo servicio Http lugar del nuevo servicio, presentado en Angular 4.3 - HttpClient ( Http va a estar en desuso). Además, en el HttpClient , el tipo de respuesta JSON se asume por defecto, por lo que debe omitir .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'');
  }
}

Answer 2

TL; DR Asegúrese de que haya una importación del HttpClientModule en toda la aplicación (recomendada) o proporcione una configuración de interceptor válida para cada uno (solo para pruebas).

Asegúrese de que HttpClientModule no se importe varias veces en diferentes módulos de la aplicación. Lo tuve importado en módulos cargados perezosos. Cada importación crea una nueva copia de HttpClient utilizando la configuración del módulo donde se importa, por lo que los interceptores proporcionados en un módulo raíz se sobrescriben.