HttpClient 4,3 angulaire : Réponse d’ordonnée à l’origine

Question

Dans la documentation relative à la nouvelle `` inclus dans la nouvelle version de 4.3 angulaire, le mécanisme d’intercepter demande s’explique très bien. Il est également mention du mécanisme interceptor réponse mais je ne trouve rien à ce sujet.

Quelqu'un a-t-il une idée sur la manière d’intercepter une réponse afin de modifier le message du corps avant d’être envoyé au service ?

Merci.

Answer 1

J'ai récemment fait un HttpInterceptor afin de résoudre les références cycliques dans certains JSON sur le côté client, essentiellement le remplacement de n'importe quel objet avec un $ref de la propriété de l'objet, dans le JSON qui a une correspondance $id de la propriété. (C'est la sortie que vous obtenez si Json.Net est configuré avec PreserveReferencesHandling.Objects et ReferenceLoopHandling.Ignore).

Les réponses ici m'a aidé certains de la voie, mais aucun d'entre eux montrent comment modifier le corps de la réponse, comme l'OP besoins. Pour ce faire, on a besoin de cloner l'événement et de mettre à jour le corps, comme suit:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).map(event => {
        if (event instanceof HttpResponse && shouldBeIntercepted(event)) {
            event = event.clone({ body: resolveReferences(event.body) })
        }         
        return event;
    });
}

Tout événement qui ne devrait pas être modifié est tout simplement passé à travers le gestionnaire suivant.

Answer 2

Je suppose que vous pouvez utiliser do comme @federico-scamuzzi suggéré, ou vous pouvez utiliser map et catch comme:

import { Injectable } from '@angular/core';
import {
  HttpErrorResponse,
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
  HttpResponse
} from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.info('req.headers =', req.headers, ';');
    return next.handle(req)
      .map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse && ~~(event.status / 100) > 3) {
          console.info('HttpResponse::event =', event, ';');
        } else console.info('event =', event, ';');
        return event;
      })
      .catch((err: any, caught) => {
        if (err instanceof HttpErrorResponse) {
          if (err.status === 403) {
            console.info('err.error =', err.error, ';');
          }
          return Observable.throw(err);
        }
      });
  }
}

---

EDIT: @LalitKushwah a une question sur la redirection if(!loggedIn). J'utilise la Route des Gardes, en particulier:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot
       } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import { AuthService } from '../../api/auth/auth.service';
import { AlertsService } from '../alerts/alerts.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router,
              private alertsService: AlertsService) {}

  canActivate(next: ActivatedRouteSnapshot,
              state: RouterStateSnapshot
              ): Observable<boolean> | Promise<boolean> | boolean {
    if (AuthService.loggedIn()) return true;

    const url: string = state.url;

    this.alertsService.add(`Auth required to view ${url}`);
    this.router
      .navigate(['/auth'], { queryParams: { redirectUrl: url } })
      .then(() => {});
    return false;
  }
}

Ensuite, je peux simplement ajouter que comme un argument de mon itinéraire:

{
  path: 'dashboard', loadChildren:'app/dashboard/dashboard.module#DashboardModule',
  canActivate: [AuthGuard]
}

Answer 3

Avec l’angulaire 6 sortie ils ont adapté RxJs 6.0 à cause que la plupart des solutions ci-dessus ne fonctionnera pas dans cette version particulière d’angulaire, c’est comment vous modifiez correctement le contenu d’une Observable

Answer 4

De ce que je peux comprendre (j’ai fait seulement de l’ordonnée à l’origine pour la demande et injecter le jeton d’authentification)... vous pouvez joindre une .do() et tester si est une réponse... comme (comme le dit doc) :