JavaScript フレームワークでのトークン認証とリクエスト再試行：Angular 4 Interceptor を用いた実装例

2024-07-27

Angular 4 Interceptor でトークン更新後のリクエスト再試行

RxJS と Angular HTTP Interceptor を使用して、以下の手順で実装できます。

HTTP Interceptor を作成する

まず、HTTP_INTERCEPTORS プロバイダーに登録する HTTP Interceptor を作成する必要があります。

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';
import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // トークンを取得
    const token = this.authService.getAuthToken();

    // リクエストヘッダーにトークンを追加
    if (token) {
      req = req.clone({ headers: req.headers.set('Authorization', `Bearer ${token}`) });
    }

    // リクエストを処理
    return next.handle(req)
      .pipe(
        tap((event: HttpEvent<any>) => {
          if (event instanceof HttpResponse) {
            // 成功した場合は何もしない
          }
        }),
        catchError((error: HttpErrorResponse) => {
          // 401 エラーの場合、トークンを更新して再試行
          if (error.status === 401) {
            return this.authService.refreshToken()
              .pipe(
                switchMap(() => {
                  // トークン更新後に同じリクエストを再試行
                  return next.handle(req);
                }),
                catchError((innerError: HttpErrorResponse) => {
                  // トークン更新失敗の場合はエラーを返す
                  return of(innerError);
                })
              );
          }

          // その他のエラーはそのまま返す
          return of(error);
        })
      );
  }
}

Interceptor を登録する

次に、app.module.ts ファイルで作成した Interceptor を登録する必要があります。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

AuthService を作成する

AuthService は、認証トークンを管理するサービスです。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Injectable()
export class AuthService {

  private token: string;

  constructor(private http: HttpClient) { }

  getAuthToken(): string {
    return this.token;
  }

  refreshToken(): Observable<string> {
    // リフレッシュトークンを使用して新しいアクセス トークンを取得
    return this.http.post('/api/refresh-token', { refreshToken: this.refreshToken })
      .pipe(
        map((response: any) => response.accessToken),
        tap(token => this.token = token)
      );
  }
}

使い方

上記の手順で作成した Interceptor と AuthService を使用して、認証トークンが期限切れになった場合にリクエストを自動的に再試行することができます。

例えば、以下のコードのように、HttpClient を使用して API リクエストを行うことができます。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MyService {

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get('/api/data');



import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Injectable()
export class AuthService {

  private token: string;

  constructor(private http: HttpClient) { }

  getAuthToken(): string {
    return this.token;
  }

  refreshToken(): Observable<string> {
    // リフレッシュ トークンを使用して新しいアクセス トークンを取得
    return this.http.post('/api/refresh-token', { refreshToken: this.refreshToken })
      .pipe(
        map((response: any) => response.accessToken),
        tap(token => this.token = token)
      );
  }
}

auth.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // トークンを取得
    const token = this.authService.getAuthToken();

    // リクエストヘッダーにトークンを追加
    if (token) {
      req = req.clone({ headers: req.headers.set('Authorization', `Bearer ${token}`) });
    }

    // リクエストを処理
    return next.handle(req)
      .pipe(
        tap((event: HttpEvent<any>) => {
          if (event instanceof HttpResponse) {
            // 成功した場合は何もしない
          }
        }),
        catchError((error: HttpErrorResponse) => {
          // 401 エラーの場合、トークンを更新して再試行
          if (error.status === 401) {
            return this.authService.refreshToken()
              .pipe(
                switchMap(() => {
                  // トークン更新後に同じリクエストを再試行
                  return next.handle(req);
                }),
                catchError((innerError: HttpErrorResponse) => {
                  // トークン更新失敗の場合はエラーを返す
                  return of(innerError);
                })
              );
          }

          // その他のエラーはそのまま返す
          return of(error);
        })
      );
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MyService {

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get('/api/data');
  }
}

このコードの説明

  • AuthInterceptor
  • AuthService
    • getAuthToken(): 現在保存されている認証トークンを返します。
    • refreshToken(): リフレッシュ トークンを使用して新しいアクセス トークンを取得し、token プロパティに保存します。


import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { tap, catchError, retryWhen } from 'rxjs/operators';
import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // トークンを取得
    const token = this.authService.getAuthToken();

    // リクエストヘッダーにトークンを追加
    if (token) {
      req = req.clone({ headers: req.headers.set('Authorization', `Bearer ${token}`) });
    }

    // リクエストを処理
    return next.handle(req)
      .pipe(
        tap((event: HttpEvent<any>) => {
          if (event instanceof HttpResponse) {
            // 成功した場合は何もしない
          }
        }),
        catchError((error: HttpErrorResponse) => {
          // 401 エラーの場合、トークン更新を試みる
          if (error.status === 401) {
            return this.authService.refreshToken()
              .pipe(
                switchMap(() => {
                  // トークン更新後に同じリクエストを再試行
                  return next.handle(req);
                }),
                catchError(() => {
                  // トークン更新失敗の場合はエラーを返す
                  return throwError(error);
                })
              );
          }

          // その他のエラーはそのまま返す
          return throwError(error);
        }),
        retryWhen(errors => {
          return errors.pipe(
            mergeMap(error => {
              if (error.status === 401) {
                // トークン更新を試みる
                return this.authService.refreshToken().pipe(
                  tap(() => {
                    // トークン更新成功
                    console.log('トークンを更新しました。');
                  }),
                  catchError(() => {
                    // トークン更新失敗
                    console.error('トークン更新に失敗しました。');
                    // 再試行を停止
                    return of(throwError(error));
                  })
                );
              }

              // 401 エラー以外の場合、再試行を停止
              return of(throwError(error));
            })
          );
        })
      );
  }
}

ErrorHandler を使用する

ErrorHandler を使用して、401 エラーを検出してトークンを更新し、リクエストを再試行することもできます。

import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

  constructor(private router: Router, private authService: AuthService) { }

  handleError(error: Error | HttpErrorResponse): Observable<never> {
    if (error instanceof HttpErrorResponse && error.status === 401) {
      // トークン更新を試みる
      return this.authService.refreshToken()
        .pipe(
          switchMap(() => {
            // トークン更新後にエラーが発生したページにリダイレクト
            this.router.navigateByUrl(error.url);
            return of(null);
          }),
          catchError(() => {
            // トークン更新失敗
            console.error('トークン更新に失敗しました。');
            // エラー画面にリダイレクト
            this.router.navigateByUrl('/error');
            return of(null);
          })
        );
    }

    // その他のエラーはデフォルトのエラーハンドラーに処理させる
    return of(null);
  }
}

RxJS Observable を使用する

RxJS Observable を使用して、トークン更新とリクエスト再試行を非同期的に処理することもできます。

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@

javascript angular rxjs


テキストエリア自動サイズ調整 (Prototype.js)

Prototype. js を使用してテキストエリアのサイズを自動調整する方法について説明します。Prototype. js を読み込みます。window. onload イベントを使用して、ページの読み込み後にスクリプトを実行します。$('myTextarea') でテキストエリアの要素を取得します。...

 
javascript html css テキストエリア自動サイズ調整 (Prototype.js)

JavaScript数値検証 IsNumeric() 解説

JavaScriptでは、入力された値が数値であるかどうかを検証する際に、isNaN()関数やNumber. isInteger()関数などを利用することが一般的です。しかし、これらの関数では小数点を含む数値を適切に検出できない場合があります。そこで、小数点を含む数値も正しく検証するために、IsNumeric()関数を実装することが有効です。...

 
javascript validation numbers JavaScript数値検証 IsNumeric() 解説

jQueryによるHTMLエスケープ解説

JavaScriptやjQueryでHTMLページに動的にコンテンツを追加する際、HTMLの特殊文字（<, >, &, など）をそのまま使用すると、意図しないHTML要素が生成される可能性があります。これを防ぐために、HTML文字列をエスケープする必要があります。...

 
javascript jquery string jQueryによるHTMLエスケープ解説

JavaScriptフレームワーク：React vs Vue.js

JavaScriptは、Webページに動的な機能を追加するために使用されるプログラミング言語です。一方、jQueryはJavaScriptライブラリであり、JavaScriptでよく行う操作を簡略化するためのツールを提供します。jQueryを学ぶ場所...

 
javascript jquery review JavaScriptフレームワーク：React vs Vue.js

JavaScriptオブジェクトプロパティの未定義検出方法

JavaScriptでは、オブジェクトのプロパティが定義されていない場合、そのプロパティへのアクセスはundefinedを返します。この現象を検出して適切な処理を行うことが重要です。最も単純な方法は、プロパティの値を直接undefinedと比較することです。...

 
javascript object undefined JavaScriptオブジェクトプロパティの未定義検出方法


SQL SQL SQL SQL Amazon で見る


JavaScript、HTML、CSSでWebフォントを検出する方法
JavaScript、HTML、CSSでWebフォントを検出する方法

CSS font-family プロパティを使用するCSS font-family プロパティは、要素に適用されるフォントファミリーを指定するために使用されます。このプロパティを使用して、Webページで使用されているフォントのリストを取得できます。

ポップアップブロック検知とJavaScript

ポップアップブロックを検知する目的ポップアップブロックはユーザーのプライバシーやセキュリティを保護するためにブラウザに組み込まれている機能です。そのため、ポップアップブロックが有効になっている場合、ポップアップを表示することができません。この状況を検知し、適切な対策を講じるために、JavaScriptを使用することができます。

HTML要素の背景色をJavaScriptでCSSプロパティを使用して設定する方法

JavaScriptを使用すると、CSSプロパティを動的に変更して、HTML要素の背景色を制御できます。この方法により、ユーザーの入力やページの状況に応じて、背景色をカスタマイズすることができます。HTML要素の参照を取得HTML要素の参照を取得

JavaScript オブジェクトの長さについて
JavaScript オブジェクトの長さについて

JavaScriptにおけるオブジェクトは、プロパティとメソッドを持つデータ構造です。プロパティはデータの値を保持し、メソッドはオブジェクトに対して実行できる関数です。JavaScriptの標準的なオブジェクトには、一般的に「長さ」という概念はありません。これは、配列のようなインデックスベースのデータ構造ではないためです。

JavaScriptグラフ可視化ライブラリ解説

JavaScriptは、ウェブブラウザ上で動作するプログラミング言語です。その中で、グラフの可視化を行うためのライブラリが数多く存在します。これらのライブラリは、データ構造やアルゴリズムを視覚的に表現することで、理解を深める助けとなります。