{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/angular-interceptor",
  "description": "AngularでAPIコール前にAuthorizationを持たせる必要があったのでHttpInterceptorを使用してみた",
  "path": "/posts/angular-interceptor",
  "publishedAt": "2024-02-29T01:38:05.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "Angular"
  ],
  "textContent": "環境\n\nAngularでリクエストヘッダーにAuthorizationを共通して持たせたい\n\nとかレスポンスのStatusCodeを見て共通処理を書くと言ったAPIリクエスト前後の処理をどこで実装するのがいいのか調べてみた。\n\nHttpInterceptor\n\nどうやらドンピシャっぽいのがこれで、ドキュメントによると\n\n> Intercepts and handles an HttpRequest or HttpResponse.\n\nつまり、リクエストとレスポンスそれぞれに処理をできますよということ。まさに探していた機能に間違いない。\n\n使ってみる\n\nリクエストに対して処理をする\n\nこれでリクエストヘッダーにBearer tokenというAuthorizationが付与されたうえでリクエストが投げられる。\n\nレスポンスに対して処理をする\n\nこれでレスポンスのstatusが400以上500未満の場合に限りconsoleが発火するようになった。これを使用すれば各statusに対する共通の処理を書くことができる。\n\napp.module.ts にプロバイダー登録\n\nそれぞれ処理を書いたらapp.module.tsのprovidersに登録する。\n\nこれで無事に求めている動きをするようになった。",
  "title": "AngularでAPIリクエスト前後の処理を共通化する"
}