Angular HTTP Interceptors: A modern guide

Angular's HttpClient is powerful, but when you're building a real-world application, you quickly find yourself repeating tasks for every API call: attaching JWT tokens, handling server errors, implementing global loading indicators, or logging performance. This is where HTTP Interceptors shine. They allow you to define middleware logic that intercepts and modifies outgoing requests and incoming responses. In recent versions of Angular, the landscape changed dramatically. Class-based interceptors, which rely on dependency injection and boilerplate interfaces, were superseded by Functional Interceptors . This article is a deep dive into functional interceptors, focused on modern best practices , packed with code snippets and real-world patterns. 1. The core concept: The "toll booth" analogy Think of an HTTP Interceptor as a toll booth on a highway. When your application components make a request ( HttpClient.get() ), the "car" (the request) must pass through the booth. The attendant can: