JWT-Tokens in TypeScript: Vollständiger Leitfaden zur Arbeit mit JSON Web Tokens

JWT-Tokens in TypeScript: Vollständiger Leitfaden

JSON Web Token (JWT) ist ein offener Standard (RFC 7519) zur Erstellung von Zugriffstokens, die auf dem JSON-Format basieren. JWT wird häufig für die Authentifizierung und den Informationsaustausch zwischen Client und Server verwendet. In diesem Artikel werden wir im Detail besprechen, wie man mit JWT-Tokens in TypeScript arbeitet, unter Verwendung gängiger Bibliotheken und Best Practices.

Was ist JWT?

JWT besteht aus drei Teilen, die durch Punkte getrennt sind:

• Header (Kopfzeile) — enthält Informationen über den Tokentyp und den Signaturalgorithmus
• Payload (Nutzlast) — enthält Daten (Claims), wie Benutzer-ID, Rolle, Gültigkeitsdauer
• Signature (Signatur) — wird aus Header, Payload und einem geheimen Schlüssel erstellt

Ein typischer JWT sieht so aus:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Installation von Bibliotheken für die Arbeit mit JWT in TypeScript

Für die Arbeit mit JWT in TypeScript verwenden wir die Bibliothek jsonwebtoken zusammen mit den Typen @types/jsonwebtoken.

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

Erstellung eines JWT-Tokens in TypeScript

Betrachten wir ein Beispiel zur Erstellung eines JWT-Tokens mit typisiertem Payload:

import jwt from 'jsonwebtoken';

// Definieren eines Interfaces für den Payloadinterface TokenPayload {    userId: string;    email: string;    role: 'user' | 'admin';}

// Geheimer Schlüssel (in einem echten Projekt in .env speichern)const JWT_SECRET = 'your-super-secret-key';

// Token erstellenfunction generateToken(payload: TokenPayload): string {    return jwt.sign(payload, JWT_SECRET, {        expiresIn: '1h', // Token ist 1 Stunde gültig        issuer: 'pythonlib.ru',        subject: payload.userId    });}

// Beispiel zur Verwendungconst userPayload: TokenPayload = {    userId: '12345',    email: 'user@example.com',    role: 'user'};

const token = generateToken(userPayload);console.log('Generierter Token:', token);

Verifizierung und Dekodierung von JWT

Zur Überprüfung der Authentizität des Tokens und zum Extrahieren der Daten verwenden Sie den folgenden Code:

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('Token abgelaufen');        } else if (error instanceof jwt.JsonWebTokenError) {            console.error('Ungültiger Token');        } else {            console.error('Verifizierungsfehler:', error);        }        return null;    }}

// Token überprüfenconst decoded = verifyToken(token);if (decoded) {    console.log('Tokendaten:', decoded);    console.log('Benutzerrolle:', decoded.role);}

Middleware für Express.js mit TypeScript

Integrieren wir die JWT-Überprüfung in eine Express-Middleware mit vollständiger Typisierung:

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

// Erweitern des Request-Interfaces zum Speichern von Benutzerdateninterface 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