MENU

【Angular】HTTP Interceptorを実装する方法

Angular
いずみ
当ページのリンクには広告が含まれています。
この記事で解決できる悩み
いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴年）で、資格は個保有しています。

「AngularでHTTP Interceptorを実装する方法を知りたい」とお考えではありませんか？

Angularアプリで、API通信のたびに認証トークンを付与するコードを書くのは手間がかかります。

HTTP Interceptorを使えば、リクエストとレスポンスへの共通処理を1箇所にまとめることが可能です。

いずみ

関数ベースのHttpInterceptorFnを使うと、クラスを書かずにシンプルに実装できます。

ということで、本記事ではAngularでHTTP Interceptorを実装する方法を解説します。

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

スクロールできます
【当サイト】おすすめフリーランスエージェント3選
エージェント評価ポイント公式サイト
レバテックフリーランス

5.0		業界最大級のエージェント。
高単価案件が豊富。		公式
Midworks

4.8		満足度調査で
3年連続3冠を達成。		公式
ITプロパートナーズ

4.6		週2〜3向けの案件が豊富。公式
執筆者／監修者
  • フリーランスエンジニア（保有資格個、企業と直接契約）
  • ブログ・アフィリエイト歴7年（2018年〜）
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資（仮想通貨・FX）歴7年（2018年〜）
  • X（旧Twitter）フォロワー約1,900人
  • 運営者情報はこちら
いずみです
よく読まれている記事はこちら！
目次

【Angular】HTTP Interceptorを実装する方法

早速ですが、AngularでHTTP Interceptorを実装する方法を解説します。

HTTP Interceptorとは

HTTP Interceptorは、HttpClientが送信するリクエストや受信するレスポンスに割り込んで共通処理を差し込む仕組みです。

Angularでは、クラスベースのHttpInterceptorに加えて、関数として書けるHttpInterceptorFnが提供されています。

HttpInterceptorFnは記述量が少なく、テストもしやすいため、新規実装ではHttpInterceptorFnを使う方針がおすすめです。

いずみ

クラスベースのHttpInterceptorも動作しますが、新規案件では関数ベースを選ぶ現場が増えている印象です。

認証トークンを付与するInterceptorを作成する

まずは、APIリクエストに認証トークンを付与するInterceptorを作成します。

STEP
インターセプター関数を作成する

srcフォルダにinterceptorsディレクトリを作成し、auth.interceptor.tsを用意します。

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authToken = localStorage.getItem('authToken');
  const authReq = req.clone({
    headers: req.headers.set('Authorization', `Bearer ${authToken}`),
  });
  return next(authReq);
};
STEP
app.config.tsに登録する

作成したauth.interceptor.tsを、provideHttpClientのwithInterceptorsに渡します。

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authInterceptor } from './interceptors/auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor])),
  ],
};
いずみ

withInterceptorsに配列で渡すだけなので、登録自体は簡単です。

エラーハンドリング用のInterceptorを追加する

続いて、レスポンスのエラーを共通処理するInterceptorを作成します。

401エラーが返ってきた場合に、ログイン画面へ自動的にリダイレクトする処理を組み込みます。

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { catchError, throwError } from 'rxjs';

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);

  return next(req).pipe(
    catchError((error) => {
      if (error.status === 401) {
        router.navigate(['/login']);
      }
      return throwError(() => error);
    })
  );
};

作成したerror.interceptor.tsも、withInterceptorsの配列に追加して登録します。

providers: [
  provideHttpClient(
    withInterceptors([authInterceptor, errorInterceptor])
  ),
],
いずみ

認証エラーのハンドリングを1箇所にまとめておくと、画面ごとに同じ処理を書かずに済みます。

複数のInterceptorを組み合わせる場合の実行順序

withInterceptorsに複数のInterceptorを渡した場合、配列に並べた順番でリクエストが処理されます。

レスポンスはリクエストと逆順で各Interceptorを通過するため、処理を追加する順番には注意が必要です。

いずみ

実行順序で挙動が想定と違うときは、配列の並び順を入れ替えて確認するのが早道です。

スクロールできます
【当サイト】おすすめフリーランスエージェント3選
エージェント評価ポイント公式サイト
レバテックフリーランス

5.0		業界最大級のエージェント。
高単価案件が豊富。		公式
Midworks

4.8		満足度調査で
3年連続3冠を達成。		公式
ITプロパートナーズ

4.6		週2〜3向けの案件が豊富。公式

【厳選】フリーランスエンジニアにおすすめなエージェント3選

フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。

僕が実際に利用しているおすすめエージェントを紹介しますね。

いずみ

エージェントは必ず複数登録してください。

担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…

僕は実際に5つのエージェントを使い回していますよ。

フリーランスを始めるなら「」

案件数マージン率単価
約88,000件非公開高
初心者福利厚生申し込み
無料
Good Point
  • 業界最大級の案件数。
  • 業界トップクラスの高単価報酬、低マージン（平均年収862万円）。
  • 案件参画中のフォローの充実。

※詳細は「【業界最大手】レバテックフリーランスとは？メリットや利用手順を解説！」を参照。

は業界最大手のフリーランスエージェントです。

とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです！

いずみ

僕もはじめてフリーランスの案件を貰ったのはです。

保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ（僕はJavaの経験3年でも案件を貰えました）。

詳細はコチラ
公式サイトを詳しく見る

手厚い保障を重視したいなら「」

案件数マージン率単価
約10,000件非公開中
初心者福利厚生申し込み
無料
Good Point
  • 手厚い保障で正社員並みの安心感。
  • 還元率60％超え＆単価公開でクリアな契約。
  • 給与保障制度（審査あり）。

は手厚い保障が特徴のフリーランスエージェントです。

フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。

いずみ

僕も何度か案件を紹介してもらいました。

自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。

詳細はコチラ
公式サイトを詳しく見る

週2〜3日の案件探しなら「」

案件数マージン率単価
約5,000件非公開高
初心者福利厚生申し込み
経験者向け無料
Good Point
  • IT案件に特化したフリーランスエージェント。
  • 週2〜3日の案件が豊富。
  • リモート案件が多く、直エンドなので単価も高い。

※詳細は「【週2・3案件】ITプロパートナーズとは？メリットや利用手順を解説！」を参照。

はIT案件に特化したフリーランスエージェントです。

週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。

いずみ

週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。

とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました！

詳細はコチラ
公式サイトを詳しく見る

よくある質問

クラスベースのHttpInterceptorと関数ベースのHttpInterceptorFnはどちらを使うべきですか？

新規プロジェクトでは、HttpInterceptorFnの利用がおすすめです。

処理がシンプルに書け、inject関数でDIコンテナからサービスを取得できるため、テストコードも書きやすくなります。

複数のInterceptorを登録した場合、実行される順序はどうなりますか？

withInterceptorsに渡した配列の順番が、そのままリクエスト処理の順番になります。

レスポンス処理は逆順になるため、認証系のInterceptorとエラーハンドリング用のInterceptorを組み合わせる際は順番を意識してください。

Interceptorの中でHTTPステータスコード以外の情報も扱えますか？

リクエストヘッダーやURL、レスポンスボディなど、HttpRequestとHttpResponseが持つ情報を自由に参照・加工できます。

ロギングやリトライ処理など、HTTPステータス以外の条件で処理を分岐させることも可能です。

まとめ

今回は、AngularでHTTP Interceptorを実装する方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • HttpInterceptorFnを使うと、クラスを書かずにInterceptorを実装できる。
  • provideHttpClientのwithInterceptorsにInterceptorを渡すことで登録できる。
  • 認証トークンの付与やエラーハンドリングなど、共通処理を1箇所にまとめられる。
まとめ
  • おすすめ本
Angularアプリケーションプログラミング
¥4,070 （2023/07/23 15:56時点 | Amazon調べ）
Amazon
＼楽天ポイント4倍セール！／
楽天市場

Angularの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました！

スクロールできます
【当サイト】おすすめフリーランスエージェント3選
エージェント評価ポイント公式サイト
レバテックフリーランス

5.0		業界最大級のエージェント。
高単価案件が豊富。		公式
Midworks

4.8		満足度調査で
3年連続3冠を達成。		公式
ITプロパートナーズ

4.6		週2〜3向けの案件が豊富。公式
  • クソおすすめ本
世界一流エンジニアの思考法 牛尾剛
¥4,480 （2024/06/01 23:28時点 | Amazon調べ）
Amazon
＼楽天ポイント4倍セール！／
楽天市場
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。

Angular

この記事が気に入ったら
フォローしてね！

シェアしてね！
  • URLをコピーしました！
目次