Angular 5 HttpInterceptorで応答を変更する方法はありますか？

Question

私のアプリケーションでは、以下を作成しましたHttpInterceptor。ここから要求の購読者に応答の変更されたバージョンを返す方法はありますか？

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

@Injectable() 
export class RequestInterceptor implements HttpInterceptor { 
    constructor(
     private router: Router 
    ) { } 

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
     return next.handle(request).do((event: HttpEvent<any>) => { 
      if (event instanceof HttpResponse) { 
       // any way to alter response that gets sent to the request subscriber? 
      } 
     }, (error: any) => {  
      if (error instanceof HttpErrorResponse) { 
       if (error.status === 401 || error.status === 403) { 
        console.log('The authentication session has expired or the user is not authorised. Redirecting to login page.'); 
        this.router.navigate(['/login']); 
       } 
      } 
     }); 
    } 
} 

ありがとうございます。

Answer 1

のHttpガイドの不変のセクションを参照してください： https://angular.io/guide/http#immutability

インターセプタは発信要求、着信応答を調べ、変異させるために存在しています。ただし、HttpRequestクラスとHttpResponseクラスがほとんど不変であることを知ることは驚くかもしれません。

これは、アプリがリクエストを再試行する可能性があるため、インターセプタチェーンが個々のリクエストを複数回処理する可能性があるためです。要求が変更可能であった場合、再試行された要求は元の要求とは異なります。不変性は、インターセプタが各試行に対して同じ要求を見ることを保証する。

インターセプタを書くときにタイプセーフティがあなたを守れない場合があります。リクエストボディです。インターセプタ内の要求本体を変更することは無効ですが、これは型システムによってチェックされません。

リクエストボディを変更する必要がある場合は、リクエストボディをコピーし、コピーを変更してから、clone（）を使用してリクエストをコピーし、新しいボディを設定する必要があります。

リクエストは不変なので、直接変更することはできません。これらを変更するには、clone（）を使用してください。

Answer 2

Marcel Lamotheさんが答えて指摘したように、イベントを複製してボディプロパティを変更することで応答を変更できます。

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

@Injectable() 
export class RequestInterceptor implements HttpInterceptor { 
    constructor(
     private router: Router 
    ) {} 

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
     return next.handle(request).map((event: HttpEvent<any>) => { 
      if (event instanceof HttpResponse) { 
       // change the response body here 
       return event.clone({ 
        body: 'myCustomResponse' 
       }); 
      } 

      return event; 
     }).do((event: HttpEvent<any>) => {}, (error: any) => { 
      if (error instanceof HttpErrorResponse) { 
       if (error.status === 401 || error.status === 403) { 
        console.log('The authentication session has expired or the user is not authorised. Redirecting to login page.'); 
        this.router.navigate(['/login']); 
       } 
      } 
     }); 
    } 
}