Angular 4.3 HttpClient : 인터셉트 응답

Angular 4.3 HttpClient : 인터셉트 응답

새로운 기능에 대한 설명서HttpClientModuleAngular 4.3의 새로운 버전에 포함된, 요청을 가로채는 메커니즘은 매우 잘 설명되어 있습니다.응답 가로채기 메커니즘에 대한 언급도 있지만, 저는 그것에 대해 아무것도 찾을 수 없습니다.

응답이 서비스로 전송되기 전에 본문 메시지를 수정하기 위해 응답을 가로채는 방법에 대해 아는 사람이 있습니까?

감사해요.

제가 최근에 만든.HttpInterceptor클라이언트 측의 일부 JSON에서 주기적인 참조를 해결하기 위해, 본질적으로 모든 객체를 대체합니다.$refJSON에 일치하는 개체가 있는 속성$id속성. (Json인 경우 출력됩니다.네트워크가 다음으로 되어 있습니다.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;
    });
}

수정해서는 안 되는 모든 이벤트는 다음 처리기로 전달됩니다.

당신은 사용할 수 있을 것 같습니다.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);
        }
      });
  }
}

---

편집: @랄리트 쿠슈와는 리디렉션에 대해 질문했습니다.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]
}

편집: 2022년 11월 출시된 Angular 15 기준으로 다음 기능 패턴을 사용할 수 있습니다.

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

Angular 6 릴리스 이후 RxJs 6.0은 인터페이스를 변경하여 연산자를 동일하게 사용할 수 없습니다(예:.map(),.tap()...).
그 때문에 위 솔루션의 대부분은 구식입니다.
다음은 RxJs 6.0+를 사용하여 관찰 가능한 내용을 올바르게 수정하는 방법입니다.pipe):

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

@Injectable()
export class ResponseInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent<any>> {

        return next.handle(req).pipe(map((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                event = event.clone({body: this.modifyBody(event.body)});
            }
            return event;
        }));

    }

    private modifyBody(body: any) {
        /*
        * write your logic to modify the body
        * */
    }
}

제가 이해할 수 있는 바로는 (요청을 위해 인터셉트를 하고 인증 토큰을 주입했을 뿐입니다.).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.`);
        }
      });
  }

}

언급URL : https://stackoverflow.com/questions/45566944/angular-4-3-httpclient-intercept-response