Angular 인터셉터는 개발자가 애플리케이션이 HTTP 요청 및 응답을 처리하는 방법을 관리하는 데 사용할 수 있는 매우 강력한 도구입니다. 로깅, 인증, 오류 처리 등과 같은 기능을 구현하는 데 중요한 역할을 하여 코드를 더 명확하고 유지 관리하기 쉽게 만듭니다.

Angular 인터셉터는 Angular 애플리케이션과 서버 사이의 미들웨어처럼 작동합니다. 요청이 서버로 전송되기 전에 가로채고 애플리케이션 구성 요소에 도달하기 전에 응답합니다. 이를 통해 개발자는 헤더를 추가하고, 요청/응답 본문을 수정하고, 상태 코드를 변경하여 요청을 수정할 수 있습니다.

Angular 프로젝트 설정

먼저 Angular CLI가 설치되어 있는지 확인하세요. 그렇지 않은 경우 npm:
으로 설치할 수 있습니다.

npm install -g @angular/cli

이제 새 Angular 프로젝트를 만듭니다.

ng new Project_Name
cd Project_Name

이제 Angular CLI를 사용하여 새로운 HTTP 인터셉터를 생성합니다.

ng generate interceptor interceptors/interceptorName

이렇게 하면 src/app/interceptors 디렉터리에 InterceptorName.interceptor.ts 및 InterceptorName.interceptor.spec.ts라는 두 개의 파일이 생성됩니다.

이제, InterceptorName.interceptor.ts를 열고 인터셉터에 대한 논리를 추가하십시오. 다음은 메시지를 기록하는 예입니다.

import { HttpInterceptorFn } from '@angular/common/http';

export const interceptorName: HttpInterceptorFn = (req, next) => {
  console.log('HTTP Request:', req);
  return next(req);
};

이제 인터셉터를 사용하려면 app.config.ts를 열고 공급자 배열에 추가하세요.

...
import { provideHttpClient,withInterceptors } from '@angular/common/http';
import { interceptorName } from './interceptors/interceptorName.interceptor';


export const appConfig: ApplicationConfig = {
  providers: [
    ....
    provideHttpClient(
      withInterceptors([interceptorName])
    ),
  ],
};

Angular 인터셉터의 고급 사용 사례

요청 및 응답의 사용자 정의 변환

인터셉터는 요청 본문, 헤더 또는 응답 데이터 형식을 애플리케이션에서 처리하기 전에 수정하는 등 요청 및 응답에 대한 데이터 변환을 맞춤화할 수 있습니다.

import { HttpInterceptorFn, HttpResponse } from '@angular/common/http';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  const modifiedReq = req.clone({
    body: { title:"Modified Request Body",id: 1 },
  });
  return next(modifiedReq);
};

테스트 시나리오를 위한 모의

개발자는 테스트 중에 HTTP 응답을 모의하는 인터셉터를 사용하여 라이브 백엔드 서비스에 의존하지 않고 다양한 서버 상황을 시뮬레이션할 수 있습니다. 이 방법을 사용하면 다양한 시나리오를 적절하게 평가할 수 있습니다.

import { HttpInterceptorFn } from '@angular/common/http';
import { of } from 'rxjs';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
    // Mock response for testing
    if (req.url.endsWith('/test')) {
    const mockResponse = { id: 1, title: 'Test Data' };
    return of(new HttpResponse({ status: 200, body: mockResponse }));
  }
    // Pass through to actual HTTP request
    return next(req);
}

오류 처리 및 재시도 메커니즘

Angular 인터셉터는 실패한 요청을 자동으로 재시도하고 오류 응답을 변환하여 사용자 경험을 개선하는 등의 오류 처리 전략을 구현하여 애플리케이션을 향상시킵니다.

import { HttpInterceptorFn } from '@angular/common/http';
import { catchError,retry, throwError } from 'rxjs';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3), // Retry failed requests up to 3 times
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

여기서 인터셉터는 오류를 처리하기 전에 실패한 요청을 최대 3번 재시도하여 요청을 성공적으로 완료하기 위한 여러 번의 시도를 보장합니다.

인터셉터 연결 및 실행 순서 제어

Angular에서 개발자는 인증, 로깅 또는 오류 처리와 같은 요청 처리의 다양한 측면을 각각 관리하는 여러 인터셉터를 연결할 수 있습니다. 등록된 순서대로 실행되므로 요청과 응답을 정확하게 수정할 수 있으며 향상된 애플리케이션 기능을 위한 유연한 워크플로 관리가 보장됩니다.

import { HttpInterceptorFn, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

// First Interceptor: Authentication
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer YOUR_TOKEN`
    }
  });
  return next(authReq);
};

// Second Interceptor: Logging
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request URL:', req.url);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log('Response Status:', event.status);
      }
    })
  );
};

// Third Interceptor: Error Handling
export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3),
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

// Registering Interceptors in Angular Module

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideHttpClient(
      withInterceptors([apiInterceptor,loggingInterceptor,errorHandlingInterceptor])
    ),
  ],
};

이벤트 처리 및 DOM 상호 작용

Angular 인터셉터에는 Angular가 DOM 이벤트와 상호작용을 처리하기 전에 이를 가로채는 기능이 있습니다. 이 기능을 사용하면 사용자 상호 작용 로깅, 애플리케이션 전체 이벤트 처리 정책 시행, 애플리케이션 내 이벤트 전파 전 추가 검증 수행 등의 작업이 가능해집니다.

import { HttpInterceptorFn } from '@angular/common/http';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
  document.addEventListener('click', (event) => {
    console.log('Click event intercepted:', event);
    // Additional custom event handling logic
  });
  return next(req);
};

외부 도구를 이용한 차단

외부 HTTP 차단 도구는 다양한 시나리오에서 매우 유용할 수 있으며, 특히 내장된 인터셉터에서 사용할 수 있는 것 이상으로 HTTP 요청 및 응답에 대한 추가 제어가 필요한 경우 더욱 그렇습니다. 이는 API 테스트 및 디버깅, 다양한 서버 조건 시뮬레이션, 애플리케이션이 다양한 엣지 케이스를 효과적으로 처리하는지 확인하는 데 특히 유용합니다.

Requestly는 개발 작업 흐름을 향상시키는 강력한 도구 중 하나입니다. 예를 들어, 애플리케이션을 개발 중이고 느린 네트워크 응답을 처리하는 방법을 테스트해야 한다고 가정해 보겠습니다.

• 설치 및 구성: 브라우저 확장으로 Requestly를 쉽게 설치하고 HTTP 요청과 응답을 가로채고 수정하는 규칙을 설정하세요.
• 규칙 관리: URL, 헤더 또는 쿼리 매개변수를 기반으로 규칙 세트를 정의하고 관리하여 특정 기준에 따라 요청을 차단합니다.
• 요청 수정: 헤더를 추가하거나, URL을 다시 작성하거나, 사전 정의된 규칙에 따라 요청을 리디렉션하여 요청을 수정하고 동적 테스트 및 디버깅 시나리오를 촉진합니다.
• 고급 사용 사례: Requestly를 활용하여 다양한 서버 응답을 시뮬레이션하고, 테스트 목적으로 엔드포인트를 모의하거나, 개발 중에 특정 네트워크 조건을 적용합니다.

결론

Angular 인터셉터는 HTTP 통신을 관리하고 Angular 애플리케이션의 견고성을 강화하는 데 없어서는 안 될 도구입니다. 방법을 숙지하고 Requestly와 같은 외부 솔루션을 탐색함으로써 개발자는 API 통합을 간소화하고 보안 관행을 개선하며 성능을 효과적으로 최적화할 수 있습니다. 다양한 백엔드 상호 작용을 자신감 있고 효율적으로 처리하면서 Angular 애플리케이션의 안정성과 확장성을 높이기 위해 인터셉터를 수용합니다.