Try to refresh token once on 401 with RxJS and Angular Http Interceptor

interceptor.ts

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpErrorResponse,
  HttpClient
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { flatMap, catchError } from 'rxjs/operators';
import { tokenUrl } from './config';

@Injectable()
export class UnauthorizedInterceptor implements HttpInterceptor {
  constructor(private http: HttpClient) {}

  // for every 401 we try to refresh tokens once
  intercept(
    req: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    return next.handle(req).pipe(
      catchError((err) => {
        if (
          err instanceof HttpErrorResponse &&
          err.status === 401 &&
          err.url !== tokenUrl
        ) {
          return this.http.get(tokenUrl).pipe(flatMap(() => next.handle(req)));
        } else {
          return throwError(err);
        }
      })
    );
  }
}