認証ヘッダーの追加
送信するリクエストにトークンを付加します
「認証ヘッダーの追加」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
認証にinterceptorを使う理由
ほとんどのAPIでは、すべてのリクエストにAuthorizationヘッダーが必要です。各呼び出しに手動で追加する代わりに、interceptorですべての送信リクエストに自動的に追加できます。
cloneしてヘッダーを追加する
リクエストは不変なので、setHeadersを指定してcloneし、トークンを付加します。
export const authInterceptor: HttpInterceptorFn = (req, next) => {
const token = inject(AuthService).getToken();
const authReq = req.clone({
setHeaders: { Authorization: 'Bearer ' + token }
});
return next(authReq);
};サービスからトークンを読み取る
認証またはトークンのサービスをinjectして、現在のトークンを取得します。サービス内でsignalやBehaviorSubjectを使うと、値を最新の状態に保てます。
export class AuthService {
private token = signal<string | null>(null);
getToken() { return this.token(); }
setToken(t: string) { this.token.set(t); }
}トークンがない場合はスキップする
ユーザーがログインしていない場合は、元のリクエストを変更せずにそのまま通します。
export const authInterceptor: HttpInterceptorFn = (req, next) => {
const token = inject(AuthService).getToken();
if (!token) return next(req);
return next(req.clone({
setHeaders: { Authorization: 'Bearer ' + token }
}));
};自分のAPIにのみ付加する
トークンをサードパーティのURLに漏らさないでください。リクエストURLがバックエンドに属しているかを確認して制限します。
const isApi = req.url.startsWith(environment.apiUrl);
if (!isApi || !token) return next(req);
return next(req.clone({
setHeaders: { Authorization: 'Bearer ' + token }
}));setHeadersとheaders.set
clone内のsetHeadersが簡潔な方法です。req.headers.set(...)を使い、{ headers }経由で渡すこともできます。setHeadersはマージするもので、すべてのヘッダーを置き換えるわけではありません。
const headers = req.headers.set('Authorization', 'Bearer ' + token);
return next(req.clone({ headers }));複数のヘッダーを追加する
1回のcloneで複数のヘッダーをまとめて付加できます。
return next(req.clone({
setHeaders: {
Authorization: 'Bearer ' + token,
'X-Client': 'web',
'Accept-Language': lang
}
}));Cookieに対するwithCredentials
トークンではなくHttpOnly Cookieを認証に使う場合は、withCredentialsを設定して、ブラウザーがクロスオリジンでCookieを送信できるようにします。
return next(req.clone({ withCredentials: true }));期限切れのトークンを更新する
トークンを更新する場合、interceptorで401を捕捉し、新しいトークンをリクエストしてから元のリクエストを再試行できます。これは、エラー処理で扱うより高度なパターンです。
interceptorを純粋に保つ
interceptorではトークンの読み取りとcloneにとどめ、ナビゲーションの開始や負荷の大きいロジックは避けるべきです。役割を絞り、リクエストパイプラインを予測しやすく保ちます。
認証interceptorを登録する
ヘッダーがログ記録やほかのinterceptorの実行より前に付加されるよう、チェーンの早い位置に配置します。
provideHttpClient(
withInterceptors([authInterceptor, loggingInterceptor])
)クイックチェック
認証ヘッダーの追加についての理解度を確認しましょう。
まとめ：認証ヘッダーの追加
認証interceptorは送信リクエストにトークンを付加します。
setHeaders: { Authorization: ... }を指定してcloneします。- トークンがない場合はスキップし、自分のAPIのURLに限定します。
- Cookie認証には
withCredentialsを使います。
次はエラーをグローバルに処理します。
よくある質問
「認証ヘッダーの追加」レッスンは無料ですか？
はい。「認証ヘッダーの追加」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「認証ヘッダーの追加」で何を学びますか？
送信するリクエストにトークンを付加します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「認証ヘッダーの追加」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。