いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。
「Angularのインターセプターを簡単に使いたい」とお考えではありませんか？
withInterceptors を使うと、従来のHTTP_INTERCEPTORS よりもシンプルにインターセプターを設定できます。
いずみコードの可読性が上がりますよ。
本記事を読めば、AngularのwithInterceptorsでインターセプターを使う方法について分かるので早速見ていきましょう！
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
【Angular】withInterceptorsでインターセプターを使う方法
早速ですが、AngularのwithInterceptorsでインターセプターを使う方法を解説します。
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { inject } from '@angular/core';
const authInterceptor = (req, next) => {
const modifiedReq = req.clone({
setHeaders: { Authorization: `Bearer your_token` }
});
return next(modifiedReq);
};
bootstrapApplication(AppComponent, {
providers: [provideHttpClient(withInterceptors([authInterceptor]))]
});上記のように使うことでインターセプターを実装できます。
いずみAngularのバージョン15からwithInterceptorsを使えるようになりました。
従来のHTTP_INTERCEPTORSよりもスッキリするので可読性が上がりますね。
よくある質問
withInterceptorsを使うメリットは何ですか？
従来のHTTP_INTERCEPTORS のような設定が不要になるので、コードがシンプルになります。
withInterceptorsはどのバージョンから使えますか？
Angular15以降で使えます。
15より前のバージョンではHTTP_INTERCEPTORS を使う必要があります。
まとめ
今回は、AngularのwithInterceptorsでインターセプターを使う方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング
」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
