【Angular】HttpInterceptorの実装(Cookieベースセッション編)

概要

AngularのHttpリクエストの前後に共通処理を実装したい場合、HttpInterceptorを実装することで対応することが可能です。

用途としては以下のケースがありそうです。

ログ出力
HTTPヘッダーにトークンを設定

今回は前回の記事で紹介したAngularでのCookieベースセッション設定を共通化したいと思います。 kakkoyakakko2.hatenablog.com

動作環境

Angular 6.0.0

サンプルソース

custom.interceptor.ts

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

@Injectable()
export class CustomInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // HttpRequestを複製。複製時にCookieベースセッションを必ずON
        const newReq = req.clone({ withCredentials: true });
        return next.handle(newReq);
    }
}

定義したインターセプターはModuleへの登録が必要です。

app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { CustomInterceptor } from './custom.interceptor';


@NgModule({
    imports: [
        HttpClientModule
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: CustomInterceptor, multi: true },
    ]
})
export class AppModule { }