角4.3 HttpClient :拦截响应

Question

在新版本的Range4.3中包含的关于新HttpClientModule的文档中，很好地解释了拦截请求的机制。这里也提到了响应拦截器机制，但是我找不到任何关于它的信息。

是否有人知道如何拦截响应，以便在将正文消息发送到服务之前修改它？

谢谢。

Answer 1

我最近做了一个HttpInterceptor，以解决客户端某些JSON中的周期性引用，本质上是用具有匹配$id属性的JSON中的对象替换为$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;
    });
}

任何不应该修改的事件都直接传递到下一个处理程序。

Answer 2

我想您可以按照@federico-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);
        }
      });
  }
}

编辑：@LalitKushwah询问重定向if(!loggedIn)。我使用航路警卫，特别是：

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

编辑:从角15释放2022年11月开始，您可以使用以下功能模式：

const route = {
  path: 'admin',
  canActivate: [() => inject(LoginService).isLoggedIn()]
};

Answer 3

据我所能理解(我只对请求执行了拦截并注入了令牌)。您可以附加一个.do()并测试是否是响应。就像医生说的那样：

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

}