Angular 12: intercepting requests and responses

🕵️‍♂️ How to use Angular interceptor to control requests and incoming responses?

When the client application handles the HTTP requests and responses, there is the possibility to customize them by :

1- adding headers to all requests (for example, authorization token, content type)
2- by logging (if we want to log the entire request/ response )
3- caching.

The power of interceptors centralizes all the logic that we want to implement in one service or class to manipulate multiple requests and responses and avoid working on each request individually.

Interceptor is just a class that implements the HttpInterceptor interface, so we should implement the unique intercept method.
This method takes two parameters:

HttpRequest : represents the request coming from the server. We manipulate this parameter before sending the modified request to the server.