Angularでヘッダーにトークンを送信する方法

2024-02-15 15:29 Angular トークン ヘッダー

  1. HttpClientModuleを使用する方法: AngularのHttpClientModuleを使用して、HTTPリクエストのヘッダーにトークンを追加することができます。以下は、その方法のコード例です。

    import { HttpClientModule, HttpHeaders } from '@angular/common/http';
// ...
// トークンを取得するロジック（例:認証サービスからトークンを取得）
const token = 'ここにトークンを取得するロジックを記述';
// HTTPリクエストのヘッダーにトークンを追加する
const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
// リクエストの実行
this.http.get('APIのURL', { headers }).subscribe(response => {
 // レスポンスの処理
});

  2. Interceptorを使用する方法: AngularのInterceptorを使用して、全てのHTTPリクエストに対して自動的にトークンを追加することができます。以下は、その方法のコード例です。

    import { Injectable } from '@angular/core';
import {
 HttpInterceptor,
 HttpRequest,
 HttpHandler,
 HttpEvent,
} from '@angular/common/http';
import { Observable } from 'rxjs';
// ...
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
 intercept(
   request: HttpRequest<any>,
   next: HttpHandler
 ): Observable<HttpEvent<any>> {
   // トークンを取得するロジック（例:認証サービスからトークンを取得）
   const token = 'ここにトークンを取得するロジックを記述';
   // ヘッダーにトークンを追加する
   const modifiedRequest = request.clone({
     setHeaders: {
       Authorization: `Bearer ${token}`,
     },
   });
   return next.handle(modifiedRequest);
 }
}

    上記のコード例では、TokenInterceptorを作成し、Interceptorを提供するプロバイダーに登録する必要があります。

これらは、Angularでヘッダーにトークンを送信するための一般的な方法のいくつかです。必要に応じて、トークンの取得方法やヘッダーのカスタマイズを行ってください。