AngularでヘッダーにJWTトークンを常につけたい

Angularで取得した認証用JWTトークンを、ヘッダーに常につけておきたいですよね。

1.そんな時はInterceptorを使います。

ng g interceptor JwtToken

JwtTokenInterceptor.ts

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

@Injectable()
export class JwtTokenInterceptor implements HttpInterceptor {

    constructor() {
    }

    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
        const token = localStorage.getItem('jwt-token'); // 何らかの方法でJWTトークンを保持・取得
        if (token) {
            const req = request.clone({
                setHeaders: {
                    'Content-Type': 'application/json',
                    Authorization: 'Bearer ' + token,
                },
            });
            return next.handle(req);
        }
        return next.handle(request);
    }
}

2.app.module.tsのprovidersにinterceptorを登録する。

app.module.ts

    providers: [
        {provide: HTTP_INTERCEPTORS, useClass: JwtTokenInterceptor, multi: true},
    ]

これでリクエストごとにヘッダーにAuthorizationが追加され、JWTトークンが送られます。