Version: 4.2

Automatically Add Auth Token to HTTP Requests

If your backend service requires the auth token for authorization, you can include it in every HTTP request.

Angular#

Implement Angular's HttpInterceptor class, attaching the auth token to the authorization header.

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

import { IdentityService } from '../identity';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private identity: IdentityService) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    return from(
      this.requestRequiresToken(req)
        ? this.identity
            .getToken()
            .then(token => {
              if (token) {
                req = req.clone({
                  setHeaders: {
                    Authorization: 'Bearer ' + token,
                  },
                });
              }
            })
            .catch(() => Promise.resolve())
        : Promise.resolve(),
    ).pipe(flatMap(() => next.handle(req)));
  }

  private requestRequiresToken(req: HttpRequest<any>): boolean {
    return !/\/login$/.test(req.url);
  }
}