有没有办法改变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 指南的不变性部分：\n https://angular.io/guide/http#immutability

\n

\n

拦截器的存在是为了检查和改变传出请求和传入响应。然而，令人惊讶的是，HttpRequest 和 HttpResponse 类在很大程度上是不可变的。

\n

这是有原因的：因为应用程序可能会重试请求，所以拦截器链可能会多次处理单个请求。如果请求是可变的，则重试的请求将与原始请求不同。不变性确保拦截器每次尝试都能看到相同的请求。

\n

有一种情况，在编写拦截器\xe2\x80\x94请求体时，类型安全无法保护你。在拦截器内改变请求主体是无效的，但是类型系统不会检查这一点。

\n

如果需要改变请求主体，则需要复制请求主体，改变副本，然后使用clone()复制请求并设置新的主体。

\n

由于请求是不可变的，因此不能直接修改它们。要改变它们，请使用clone()

\n

\n