web-dev-qa-db-fra.com

Angular 4.3 L'intercepteur ne fonctionne pas

J'essaie d'utiliser new Angular 4.3 intercepteurs pour la définition d’un en-tête d’autorisation pour toutes les demandes. Cependant, cela ne fonctionne pas. J'ai défini un point d'arrêt dans la méthode intercepteurs intercept et le navigateur ne l'a pas touchée. Il semble donc que angular ignore simplement mon intercepteur. S'il vous plaît aidez-moi, merci d'avance.

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}
  ]
})
javascriptangular
40
Kirill Ivanov

La raison - vous utilisez l'ancien service Http au lieu du nouveau service, introduit dans Angular 4.3 - HttpClient (Http sera obsolète). De plus, le type de réponse JSON HttpClient est supposé par défaut. Vous devez donc omettre .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');
  }
}
66
Maxim Kuzmin

TL; DR Assurez-vous qu'il y a une importation de HttpClientModule dans l'application entière (recommandé) ou fournissez une configuration d'intercepteur valide pour chacun (ofc pour les tests uniquement).

Assurez-vous que HttpClientModule n'est pas importé plusieurs fois dans différents modules de l'application. Je l'avais importé dans des modules chargés paresseux. Chaque importation crée une nouvelle copie de HttpClient à l'aide de la configuration du module dans lequel elle est importée. Les intercepteurs fournis dans un module racine sont donc remplacés.

69
Michał Chilczuk

Si vous avez déjà vérifié que vous utilisez le service HttpClient et que vous avez importé HttpClientModule une fois, mais que vous rencontrez toujours des problèmes, vérifiez ceci:

Si vous utilisez fourniIn: 'root' et que votre service est contenu dans un module.

@Injectable({
  providedIn: 'root'
})
export class YourService {
    ...
}

Assurez-vous que vous n'avez pas ajouté le service dans le tableau de fournisseurs de votre module.

@NgModule({
  ...
  providers: [
    YourService, // REMOVE THIS LINE
  ]
})
export class YourModule { }

Cela écrasera vos intercepteurs pour ce service.

0
Ramón Casares