Comment intercepter la réponse en angulaire 4 avec HttpInterceptor

Question

J'ai l'intercepteur suivant:

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(private tokenService: TokenService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.tokenService.getToken();

    if (token) {
      const authReq = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${token}`)
      });

      return next.handle(authReq);
    }

    return next
      .handle(req)
//
      .getSomehowTheResponse()
      .andSaveTheTokenInStorage()
      .andPropagateNextTheResponse()
  }
}

Et je veux enregistrer le jeton de l'en-tête de la réponse dans la mémoire locale, tous les tutoriels montrent comment intercepter la demande, mais pas très clairement la réponse.

Answer 1

next.handle(req) renvoie un observable afin que vous puissiez vous y abonner:

return next.handle(req).map((event: HttpEvent<any>) => {
  if (event instanceof HttpResponse) {
    // do stuff with response and headers you want
    event.headers
    event.body
  }
  return event;
})

Pour en savoir plus sur les mécanismes derrière les intercepteurs, lisez:

• Guide de l’initié concernant les intercepteurs et la mécanique HttpClient dans Angular

Answer 2

vous devez également importer la bibliothèque 

    import 'rxjs/add/operator/map';

alors vous utilisez comme ci-dessous. vous devez également renvoyer l'objet événement pour qu'il puisse être reçu dans votre fonction subscribe ().

    return next.handle(req).map((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // do stuff with response and headers you want
      }
      return event; 
    });