Jetons JWT en TypeScript : guide complet pour travailler avec les JSON Web Tokens

Jetons JWT en TypeScript : guide complet

JSON Web Token (JWT) est un standard ouvert (RFC 7519) pour créer des jetons d'accès basés sur le format JSON. JWT est largement utilisé pour l'authentification et l'échange d'informations entre le client et le serveur. Dans cet article, nous allons détailler comment travailler avec les jetons JWT en TypeScript, en utilisant des bibliothèques populaires et les meilleures pratiques.

Qu'est-ce que JWT ?

JWT se compose de trois parties séparées par des points :

• Header (en-tête) — contient des informations sur le type de jeton et l'algorithme de signature
• Payload (charge utile) — contient les données (claims), telles que l'ID utilisateur, le rôle, la durée de validité
• Signature (signature) — créée à partir de l'en-tête, de la charge utile et de la clé secrète

Un JWT typique ressemble à ceci :

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Installation des bibliothèques pour travailler avec JWT en TypeScript

Pour travailler avec JWT en TypeScript, nous utiliserons la bibliothèque jsonwebtoken avec les types @types/jsonwebtoken.

npm install jsonwebtokennpm install --save-dev @types/jsonwebtoken

Création d'un jeton JWT en TypeScript

Considérons un exemple de création d'un jeton JWT avec une charge utile typée :

import jwt from 'jsonwebtoken';

// Définir une interface pour la charge utileinterface TokenPayload {    userId: string;    email: string;    role: 'user' | 'admin';}

// Clé secrète (dans un projet réel, stockez-la dans .env)const JWT_SECRET = 'your-super-secret-key';

// Créer le jetonfunction generateToken(payload: TokenPayload): string {    return jwt.sign(payload, JWT_SECRET, {        expiresIn: '1h', // le jeton est valide 1 heure        issuer: 'pythonlib.ru',        subject: payload.userId    });}

// Exemple d'utilisationconst userPayload: TokenPayload = {    userId: '12345',    email: 'user@example.com',    role: 'user'};

const token = generateToken(userPayload);console.log('Jeton généré :', token);

Vérification et décodage de JWT

Pour vérifier l'authenticité du jeton et extraire les données, utilisez le code suivant :

import jwt, { JwtPayload, VerifyErrors } from 'jsonwebtoken';

interface DecodedToken extends JwtPayload {    userId: string;    email: string;    role: 'user' | 'admin';}

function verifyToken(token: string): DecodedToken | null {    try {        const decoded = jwt.verify(token, JWT_SECRET) as DecodedToken;        return decoded;    } catch (error) {        if (error instanceof jwt.TokenExpiredError) {            console.error('Le jeton a expiré');        } else if (error instanceof jwt.JsonWebTokenError) {            console.error('Jeton invalide');        } else {            console.error('Erreur de vérification :', error);        }        return null;    }}

// Vérifier le jetonconst decoded = verifyToken(token);if (decoded) {    console.log('Données du jeton :', decoded);    console.log('Rôle de l'utilisateur :', decoded.role);}

Middleware pour Express.js avec TypeScript

Intégrons la vérification JWT dans un middleware Express avec une typage complet :

import { Request, Response, NextFunction } from 'express';import jwt from 'jsonwebtoken';

// Étendre l'interface Request pour stocker les données utilisateurinterface AuthRequest extends Request {    user?: {        userId: string;        email: string;        role: 'user' | 'admin';    };}

function authMiddleware(req: AuthRequest, res: Response, next: NextFunction): void {    const authHeader = req.headers.authorization;

    if (!authHeader || !authHeader.startsWith('Bearer ')) {        res.status(401).json({ message: 'To