ReactでJWTトークンをデコードする方法

2024-02-09 06:05 React JWT トークン

  1. jsonwebtokenパッケージを使用する方法: jsonwebtokenパッケージは、JWTトークンを簡単にデコードするための便利なツールです。まず、jsonwebtokenパッケージをインストールします。

    npm install jsonwebtoken

    デコードするために、以下のようにコードを記述します。

    import jwt from 'jsonwebtoken';
const token = 'your_jwt_token_here';
const decodedToken = jwt.decode(token);
console.log(decodedToken);

    decodedTokenには、デコードされたトークンの情報が含まれます。

  2. jwt-decodeパッケージを使用する方法: もう一つの便利なパッケージはjwt-decodeです。これもJWTトークンをデコードするために使用できます。

    npm install jwt-decode

    デコードするために、以下のようにコードを記述します。

    import jwt_decode from 'jwt-decode';
const token = 'your_jwt_token_here';
const decodedToken = jwt_decode(token);
console.log(decodedToken);

    decodedTokenには、デコードされたトークンの情報が含まれます。

  3. 手動でデコードする方法: JWTトークンはBase64でエンコードされていますので、手動でデコードすることもできます。以下のコードは、手動でデコードする方法の例です。

    const token = 'your_jwt_token_here';
const tokenParts = token.split('.');
const header = JSON.parse(atob(tokenParts[0]));
const payload = JSON.parse(atob(tokenParts[1]));
console.log(header);
console.log(payload);

    headerには、デコードされたヘッダー情報が含まれます。payloadには、デコードされたペイロード情報が含まれます。