Angular interceptors are middleware-like services that can be used to intercept and modify HTTP requests and responses globally within our application. They are useful for implementing cross-cutting concerns such as authentication, error handling, logging, and caching.<\/p>\n\n\n\n
An interceptor is essentially a class that implements the HttpInterceptor interface. By implementing this interface, the class can override certain methods that allow code to be executed before the request or after the response.<\/p>\n\n\n\n
There are two main methods an interceptor can provide:<\/p>\n\n\n\n
An authentication interceptor is used to add authentication tokens to outgoing requests and handle authentication-related errors. This is essential for securing our application\u2019s API requests.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n} from '@angular\/common\/http';\n\n@Injectable()\nexport class AuthInterceptor implements HttpInterceptor {\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n const authToken = 'your-auth-token';\n const authRequest = request.clone({\n headers: request.headers.set('Authorization', `Bearer ${authToken}`),\n });\n return next.handle(authRequest);\n }\n}<\/code><\/pre>\n\n\n\n2. Error Handling Interceptor<\/span><\/h4>\n\n\n\nAn error handling interceptor can be used to centralize error handling for HTTP requests. It can capture HTTP errors, log them, and perform appropriate actions like displaying error messages.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n HttpErrorResponse,\n} from '@angular\/common\/http';\nimport { catchError } from 'rxjs\/operators';\nimport { throwError } from 'rxjs';\n\n@Injectable()\nexport class ErrorInterceptor implements HttpInterceptor {\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n return next.handle(request).pipe(\n catchError((error: HttpErrorResponse) => {\n \/\/ Handle and log the error here\n console.error('HTTP Error:', error);\n \/\/ Optionally rethrow the error to propagate it\n return throwError(error);\n })\n );\n }\n}<\/code><\/pre>\n\n\n\n3. Logging Interceptor<\/span><\/h4>\n\n\n\nA logging interceptor can be used to log the details of HTTP requests and responses, which is helpful for debugging and monitoring.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n HttpResponse,\n} from '@angular\/common\/http';\nimport { tap } from 'rxjs\/operators';\n\n@Injectable()\nexport class LoggingInterceptor implements HttpInterceptor {\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n return next.handle(request).pipe(\n tap((event) => {\n if (event instanceof HttpResponse) {\n console.log('HTTP Response:', event);\n }\n })\n );\n }\n}<\/code><\/pre>\n\n\n\n4. Caching Interceptor<\/span><\/h4>\n\n\n\nA caching interceptor can be used to implement client-side caching for HTTP responses, reducing the number of unnecessary network requests.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n HttpResponse,\n HttpHeaders,\n} from '@angular\/common\/http';\nimport { tap } from 'rxjs\/operators';\n\n@Injectable()\nexport class CacheInterceptor implements HttpInterceptor {\n private cache = new Map<string, HttpResponse<any>>();\n\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n if (request.method !== 'GET') {\n return next.handle(request);\n }\n\n const cachedResponse = this.cache.get(request.url);\n\n if (cachedResponse) {\n return of(cachedResponse);\n }\n\n return next.handle(request).pipe(\n tap((event) => {\n if (event instanceof HttpResponse) {\n this.cache.set(request.url, event);\n }\n })\n );\n }\n}<\/code><\/pre>\n\n\n\n5. Headers Interceptor<\/span><\/h4>\n\n\n\nA headers interceptor can be used to add custom headers to outgoing HTTP requests. This is often used to set headers like \u2018Content-Type\u2019 or include API keys.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n} from '@angular\/common\/http';\n\n@Injectable()\nexport class HeadersInterceptor implements HttpInterceptor {\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n const headers = new HttpHeaders({\n 'Content-Type': 'application\/json',\n 'X-API-Key': 'your-api-key',\n });\n const headersRequest = request.clone({ headers });\n return next.handle(headersRequest);\n }\n}<\/code><\/pre>\n\n\n\n6. Loading Indicator Interceptor<\/span><\/h4>\n\n\n\nA loading indicator interceptor can be used to show and hide loading spinners or progress bars during HTTP requests, providing a better user experience.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n} from '@angular\/common\/http';\nimport { LoadingService } from '.\/loading.service';\nimport { finalize } from 'rxjs\/operators';\n\n@Injectable()\nexport class LoadingInterceptor implements HttpInterceptor {\n constructor(private loadingService: LoadingService) {}\n\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n this.loadingService.showLoading();\n return next.handle(request).pipe(\n finalize(() => {\n this.loadingService.hideLoading();\n })\n );\n }\n}<\/code><\/pre>\n\n\n\n7. Base URL Interceptor<\/span><\/h4>\n\n\n\nA base URL interceptor can be used to prepend a base URL to all HTTP requests, simplifying the configuration of API endpoints.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n} from '@angular\/common\/http';\n\n@Injectable()\nexport class BaseUrlInterceptor implements HttpInterceptor {\n private baseUrl = 'https:\/\/api.example.com';\n\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n const apiRequest = request.clone({\n url: `${this.baseUrl}${request.url}`,\n });\n return next.handle(apiRequest);\n }\n}<\/code><\/pre>\n\n\n\n8. Offline Mode Interceptor<\/span><\/h4>\n\n\n\nAn offline mode interceptor can be used to detect when the user\u2019s device is offline and handle HTTP requests accordingly, such as storing them for later or showing a friendly message.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n HttpErrorResponse,\n} from '@angular\/common\/http';\nimport { throwError } from 'rxjs';\nimport { catchError } from 'rxjs\/operators';\n\n@Injectable()\nexport class OfflineModeInterceptor implements HttpInterceptor {\n constructor() {}\n\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n \/\/ Check if the device is offline\n if (!navigator.onLine) {\n \/\/ Handle offline mode (e.g., store requests for later)\n console.error('Device is offline. Request not sent:', request.url);\n return throwError(new HttpErrorResponse({ status: 0, statusText: 'Offline' }));\n }\n\n return next.handle(request);\n }\n}<\/code><\/pre>\n\n\n\n9. JWT Refresh Token Interceptor<\/span><\/h4>\n\n\n\nA JWT refresh token interceptor can be used to automatically refresh expired JSON Web Tokens (JWTs) and seamlessly continue making authenticated requests.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n HttpErrorResponse,\n} from '@angular\/common\/http';\nimport { AuthService } from '.\/auth.service';\nimport { catchError, switchMap } from 'rxjs\/operators';\nimport { throwError } from 'rxjs';\n\n@Injectable()\nexport class JwtRefreshInterceptor implements HttpInterceptor {\n constructor(private authService: AuthService) {}\n\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n return next.handle(request).pipe(\n catchError((error: HttpErrorResponse) => {\n if (error.status === 401 && error.error && error.error.message === 'Token expired') {\n \/\/ Token expired; attempt to refresh it\n return this.authService.refreshToken().pipe(\n switchMap(() => {\n \/\/ Retry the original request with the new token\n const updatedRequest = request.clone({\n setHeaders: {\n Authorization: `Bearer ${this.authService.getAccessToken()}`,\n },\n });\n return next.handle(updatedRequest);\n }),\n catchError(() => {\n \/\/ Refresh token failed; log out the user or handle the error\n \/\/ For example, you can redirect to the login page\n this.authService.logout();\n return throwError('Token refresh failed');\n })\n );\n }\n return throwError(error);\n })\n );\n }\n}<\/code><\/pre>\n\n\n\n10. Request Timing Interceptor<\/span><\/h4>\n\n\n\nA request timing interceptor can be used to measure and log the time taken for each HTTP request, helping us identify performance bottlenecks.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n} from '@angular\/common\/http';\nimport { tap } from 'rxjs\/operators';\n\n@Injectable()\nexport class RequestTimingInterceptor implements HttpInterceptor {\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n const startTime = Date.now();\n return next.handle(request).pipe(\n tap(() => {\n const endTime = Date.now();\n const duration = endTime - startTime;\n console.log(`Request to ${request.url} took ${duration}ms`);\n })\n );\n }\n}<\/code><\/pre>\n\n\n\n11. Localization Interceptor<\/h4>\n\n\n\n
A localization interceptor can be used to automatically include the user\u2019s preferred language or locale in HTTP requests, ensuring that the server sends responses in the appropriate language.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n} from '@angular\/common\/http';\nimport { LocaleService } from '.\/locale.service';\n\n@Injectable()\nexport class LocalizationInterceptor implements HttpInterceptor {\n constructor(private localeService: LocaleService) {}\n\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n const userLocale = this.localeService.getUserLocale();\n const localizedRequest = request.clone({\n setHeaders: {\n 'Accept-Language': userLocale,\n },\n });\n return next.handle(localizedRequest);\n }\n}<\/code><\/pre>\n\n\n\n12. Content Security Policy (CSP) Interceptor<\/h4>\n\n\n\n
A CSP interceptor can be used to automatically add Content Security Policy headers to outgoing HTTP requests to improve security.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n HttpInterceptor,\n HttpRequest,\n HttpHandler,\n} from '@angular\/common\/http';\n\n@Injectable()\nexport class CspInterceptor implements HttpInterceptor {\n constructor() {}\n\n intercept(request: HttpRequest<any>, next: HttpHandler) {\n const cspHeader = \"default-src 'self'; script-src 'self' 'unsafe-inline'\";\n const cspRequest = request.clone({\n setHeaders: {\n 'Content-Security-Policy': cspHeader,\n },\n });\n return next.handle(cspRequest);\n }\n}<\/code><\/pre>\n\n\n\n<\/div>\n\n\n\nUsing Interceptors in Angular<\/h4>\n\n\n\n
To use interceptors in our Angular application, we need to provide them in our module. Here\u2019s an example of how to do this:<\/p>\n\n\n\n
import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\nimport { HttpClientModule, HTTP_INTERCEPTORS } from '@angular\/common\/http';\n\nimport { AppComponent } from '.\/app.component';\nimport { AuthInterceptor } from '.\/auth.interceptor';\nimport { ErrorInterceptor } from '.\/error.interceptor';\nimport { LoggingInterceptor } from '.\/logging.interceptor';\nimport { HeadersInterceptor } from '.\/headers.interceptor';\nimport { LoadingInterceptor } from '.\/loading.interceptor';\n\nimport { BaseUrlInterceptor } from '.\/base-url.interceptor';\n\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule, HttpClientModule],\n providers: [\n { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },\n { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },\n { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },\n { provide: HTTP_INTERCEPTORS, useClass: HeadersInterceptor, multi: true },\n { provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true },\n\n { provide: HTTP_INTERCEPTORS, useClass: BaseUrlInterceptor, multi: true },\n\n ],\n bootstrap: [AppComponent],\n})\nexport class AppModule {}<\/code><\/pre>\n\n\n\nIn this example, we\u2019ve provided multiple interceptors using the HTTP_INTERCEPTORS<\/code> token, and Angular will apply them in the order they are provided.<\/p>\n\n\n\n<\/p>\n\n\n\n
Conclusion<\/h4>\n\n\n\n
Angular interceptors are a powerful tool for handling common HTTP-related tasks in our application. They allow us to centralize and modularize concerns such as authentication, error handling, logging, and caching. By implementing interceptors, we can improve the maintainability and scalability of our Angular applications while keeping our code clean and organized.<\/p>\n\n\n\n