-
必要なパッケージのインストール Angularアプリケーションには、
@auth0/angular-jwt
パッケージが必要です。このパッケージは、JWTを扱うための便利なヘルパー関数とディレクティブを提供します。以下のコマンドを使用して、パッケージをインストールします。npm install @auth0/angular-jwt
-
モジュールへのインポート JWT機能を使用するために、Angularのモジュールに
JwtModule
をインポートする必要があります。通常、app.module.ts
ファイルを編集します。import { JwtModule } from '@auth0/angular-jwt'; @NgModule({ ... imports: [ JwtModule.forRoot({ config: { tokenGetter: () => { return localStorage.getItem('access_token'); }, allowedDomains: ['example.com'], disallowedRoutes: ['example.com/login'] } }) ], ... }) export class AppModule { }
この例では、
tokenGetter
関数が定義されています。この関数は、JWTトークンを取得するために使用されます。一般的には、トークンはローカルストレージやクッキーに保存されます。allowedDomains
とdisallowedRoutes
プロパティを使用して、許可されたドメインと除外されたルートを指定することもできます。 -
JWTの使用 インストールと設定が完了したら、JWTを使用するコンポーネントやサービスで
JwtHelperService
をインポートして使用することができます。import { JwtHelperService } from '@auth0/angular-jwt'; constructor(private jwtHelper: JwtHelperService) { } // トークンの検証例 checkTokenValidity() { const token = localStorage.getItem('access_token'); const isTokenExpired = this.jwtHelper.isTokenExpired(token); console.log('Token expired:', isTokenExpired); }
JwtHelperService
は、JWTトークンの検証やデコードなど、さまざまなJWT関連の操作を実行するための便利なメソッドを提供します。
以上が、AngularでJWTをインストールして使用するための手順です。これにより、アプリケーションで認証や認可などのセキュリティ関連の機能を実装することができます。