有沒有辦法改變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

就像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']);
                }
            }
        });
    }
}

Answer 2

請參閱Http指南的Immutability部分： https ： //angular.io/guide/http#immutability

存在攔截器來檢查和改變傳出請求和傳入響應。 但是，了解HttpRequest和HttpResponse類在很大程度上是不可變的可能會令人驚訝。

這是有原因的：因為app可能會重試請求，攔截器鏈可能會多次處理單個請求。 如果請求是可變的，則重試的請求將與原始請求不同。 不可變性確保攔截器對每次嘗試都看到相同的請求。

有一種情況，在編寫攔截器時，類型安全無法保護您 - 請求體。 在攔截器中改變請求體是無效的，但類型系統不會檢查它。

如果您需要變更請求主體，則需要復制請求主體，更改副本，然后使用clone（）復制請求並設置新主體。

由於請求是不可變的，因此無法直接修改它們。 要改變它們，使用clone（）