Angular Interceptors — Auth & Global HTTP Error Handling (Basics, 2025)
- Angular HTTP Interceptors는 HTTP 요청 전후에 작업을 수행하여 헤더 추가, 캐시 데이터 반환, 로딩 상태 설정 등에 활용됩니다. ⚙️
- 인터셉터는 특정 인터페이스를 구현하고 애플리케이션에 등록해야 하는 간단한 함수로 표현됩니다. 🧩
- 인증 헤더와 토큰을 모든 HTTP 요청에 추가하는 인터셉터를 만들어 보안을 강화할 수 있습니다. 🛡️
- Angular CLI를 사용하여 인터셉터를 생성하고,
app.config.ts
파일에서 withInterceptors
함수를 통해 등록합니다. 💻
- 요청 불변성 원칙을 준수하여 인터셉터가 동일한 요청에 대해 항상 동일하게 작동하도록 요청을 복제해야 합니다. 🧬
- HTTP 응답 이벤트에 반응하는 인터셉터를 만들어 오류를 처리하고, 재시도 메커니즘을 구현할 수 있습니다. 🚨
- RxJS의
pipe
를 사용하여 HTTP 이벤트를 관찰하고, catchError
연산자로 오류를 처리하며, tap
연산자로 사이드 이펙트를 수행합니다. 🎣
- 오류 발생 시 스낵바 메시지를 표시하여 사용자에게 알리는 기능을 구현할 수 있습니다. 💬
- 오류 유형에 따라 다른 방식으로 대응하기 위해 여러 인터셉터를 사용하여 코드를 분리하고 유지보수성을 높일 수 있습니다. ✇
- 인터셉터는 HTTP 클라이언트를 통해 이루어지는 요청에만 적용되며,
fetch
함수를 직접 호출하는 경우에는 적용되지 않습니다. 📡
- 인터셉터 실행 순서는
app.config.ts
파일에 정의된 순서에 따르므로 순서가 중요한 경우 주의해야 합니다. 🔢
- 고급 시나리오에서는 특정 경로에 대해서만 인터셉터를 적용하는 방법을 사용할 수 있습니다. 🗺️