角4.3 HttpClient：インターセプト応答

Question

Angular 4.3の新しいバージョンに含まれる新しいHttpClientModuleに関するドキュメントでは、要求を傍受するメカニズムは非常によく説明されていますが、応答傍受メカニズムについても言及していません。

誰でもここで応答を傍受し、ボディメッセージがサービスに送信される前に変更することができますか？

ありがとうございました。ここで

Answer 1

は、リクエストとレスポンスインターセプタの両方のための例と短い記事です：私が理解できるものから、A Taste From The New Angular HTTP Client

Answer 2

（私は唯一の要求のためのインターセプトを行い、認証トークンを挿入しました）..あなたを添付することができます。 REPONSEある場合の対処（）およびテスト...（DOCが言うように）のような：

import 'rxjs/add/operator/do'; 

export class TimingInterceptor implements HttpInterceptor { 
    constructor(private auth: AuthService) {} 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    const started = Date.now(); 
    return next 
     .handle(req) 
     .do(event => { 
     if (event instanceof HttpResponse) { //<-- HERE 
      const elapsed = Date.now() - started; 
      console.log(event} ms.`); 
     } 
     }); 
    } 

} 

Answer 3

私は@のフェデリコ・scamuzziが示唆されているように、あなたがdoを使用することができると仮定し、またはあなたがそうのようmapとcatchを使用することができます。

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はif(!loggedIn)をリダイレクトについて尋ねました。私は具体的には、Route Guardsを使用します。

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; 
    } 
} 

その後、私は単に私のルートへの引数としてこれを追加することができます。

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

Answer 4

私は最近のいくつかのJSONで循環参照を解決するためにHttpInterceptorを作りましたJSON内の '$ id'プロパティが一致するオブジェクトで '$ ref'プロパティを持つオブジェクトを本質的に置き換えます。 （これは、Json.NetがPreserveReferencesHandling.ObjectsおよびReferenceLoopHandling.Ignoreで構成されている場合に出力されます）。

ここでの回答は私に役立ちましたが、OPのニーズのようにレスポンスのボディを変更する方法を示すものはありません。そうするためには、そのようなイベントのクローンを作成し、身体を更新する必要があります。

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; 
    }); 
} 

変更すべきではない任意のイベントは、単に次のハンドラに渡されます。