A JWT refresh token interceptor can be used to automatically refresh expired JSON Web Tokens (JWTs) and seamlessly continue making authenticated requests.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpErrorResponse,
} from '@angular/common/http';
import { AuthService } from './auth.service';
import { catchError, switchMap } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable()
export class JwtRefreshInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        if (
          error.status === 401 
         && error.error 
         && error.error.message === 'Token expired'
       ) {

          return this.authService.refreshToken().pipe(
            switchMap(() => {
              // Retry the original 
              // request with the new token
              const token = `Bearer ${
                this.authService.getAccessToken()
              }`;
              const updatedRequest = request.clone({
                setHeaders: { Authorization: token },
              });
              return next.handle(updatedRequest);
            }),
            catchError(() => {
              // Refresh token failed; 
              // log out the user or 
              // handle the error
              // For example, you can 
              // redirect to the login page
              this.authService.logout();
              const msg = 'Token refresh failed';
              return throwError(msg);
            })
          );
        }
        return throwError(error);
      })
    );
  }
}

A request timing interceptor can be used to measure and log the time taken for each HTTP request, helping you identify performance bottlenecks.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';
import { tap } from 'rxjs/operators';

@Injectable()
export class RequestTimingInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const msg = `
      Request to ${request.url} took ${duration}ms
    `;
    const startTime = Date.now();
    return next.handle(request)
      .pipe(
        tap(() => {
          const endTime = Date.now();
          const duration = endTime - startTime;
          console.log(msg);
        })
      );
  }
}

A localization interceptor can be used to automatically include the user’s preferred language or locale in HTTP requests, ensuring that the server sends responses in the appropriate language.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';
import { LocaleService } from './locale.service';

@Injectable()
export class LocalizationInterceptor implements HttpInterceptor {
  constructor(private localeService: LocaleService) {}

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const userLocale = this.localeService.getUserLocale();
    const localizedRequest = request.clone({
      setHeaders: {
        'Accept-Language': userLocale,
      },
    });
    return next.handle(localizedRequest);
  }
}

A CSP interceptor can be used to automatically add Content Security Policy headers to outgoing HTTP requests to improve security.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';

@Injectable()
export class CspInterceptor implements HttpInterceptor {

  intercept(
    request: HttpRequest<any>, 
    next: HttpHandler
  ) {
    const cspHeader = "default-src 'self'; script-src 'self' 'unsafe-inline'";
    const cspRequest = request.clone({
      setHeaders: {
        'Content-Security-Policy': cspHeader,
      },
    });
    return next.handle(cspRequest);
  }
}

A compression interceptor can be used to automatically request compressed content (e.g., gzip) from the server, reducing the amount of data transferred over the network.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';

@Injectable()
export class CompressionInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const compressedRequest = request.clone({
      setHeaders: { 
        'Accept-Encoding': 'gzip, deflate' 
      },
    });
    return next.handle(compressedRequest);
  }
}