Tokens JWT en TypeScript: guía completa para trabajar con JSON Web Tokens

Tokens JWT en TypeScript: guía completa

\n\n

JSON Web Token (JWT) es un estándar abierto (RFC 7519) para la creación de tokens de acceso basados en el formato JSON. JWT se utiliza ampliamente para la autenticación y el intercambio de información entre el cliente y el servidor. En este artículo, analizaremos en detalle cómo trabajar con tokens JWT en TypeScript, utilizando bibliotecas populares y las mejores prácticas.

\n\n

¿Qué es JWT?

\n\n

JWT consta de tres partes separadas por puntos:

\n

\n
• Header (encabezado) — contiene información sobre el tipo de token y el algoritmo de firma
\n
• Payload (carga útil) — contiene datos (claims), como el ID del usuario, el rol, la fecha de vencimiento
\n
• Signature (firma) — se crea a partir del encabezado, el payload y la clave secreta
\n

\n\n

Un JWT típico se ve así:

\n

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

\n\n

Instalación de bibliotecas para trabajar con JWT en TypeScript

\n\n

Para trabajar con JWT en TypeScript, utilizaremos la biblioteca jsonwebtoken junto con los tipos @types/jsonwebtoken.

\n\n

npm install jsonwebtoken\nnpm install --save-dev @types/jsonwebtoken

\n\n

Creación de un token JWT en TypeScript

\n\n

Veamos un ejemplo de creación de un token JWT con un payload tipado:

\n\n

import jwt from 'jsonwebtoken';\n\n// Definimos la interfaz para el payload\ninterface TokenPayload {\n    userId: string;\n    email: string;\n    role: 'user' | 'admin';\n}\n\n// Clave secreta (en un proyecto real, guárdela en .env)\nconst JWT_SECRET = 'your-super-secret-key';\n\n// Creamos el token\nfunction generateToken(payload: TokenPayload): string {\n    return jwt.sign(payload, JWT_SECRET, {\n        expiresIn: '1h', // el token es válido por 1 hora\n        issuer: 'pythonlib.ru',\n        subject: payload.userId\n    });\n}\n\n// Ejemplo de uso\nconst userPayload: TokenPayload = {\n    userId: '12345',\n    email: 'user@example.com',\n    role: 'user'\n};\n\nconst token = generateToken(userPayload);\nconsole.log('Token generado:', token);

\n\n

Verificación y decodificación de JWT

\n\n

Para verificar la autenticidad del token y extraer los datos, use el siguiente código:

\n\n

import jwt, { JwtPayload, VerifyErrors } from 'jsonwebtoken';\n\ninterface DecodedToken extends JwtPayload {\n    userId: string;\n    email: string;\n    role: 'user' | 'admin';\n}\n\nfunction verifyToken(token: string): DecodedToken | null {\n    try {\n        const decoded = jwt.verify(token, JWT_SECRET) as DecodedToken;\n        return decoded;\n    } catch (error) {\n        if (error instanceof jwt.TokenExpiredError) {\n            console.error('El token ha expirado');\n        } else if (error instanceof jwt.JsonWebTokenError) {\n            console.error('Token inválido');\n        } else {\n            console.error('Error de verificación:', error);\n        }\n        return null;\n    }\n}\n\n// Verificamos el token\nconst decoded = verifyToken(token);\nif (decoded) {\n    console.log('Datos del token:', decoded);\n    console.log('Rol del usuario:', decoded.role);\n}

\n\n

Middleware para Express.js con TypeScript

\n\n

Integramos la verificación JWT en un middleware de Express con tipado completo:

\n\n

import { Request, Response, NextFunction } from 'express';\nimport jwt from 'jsonwebtoken';\n\n// Extendemos la interfaz Request para almacenar los datos del usuario\ninterface AuthRequest extends Request {\n    user?: {\n        userId: string;\n        email: string;\n        role: 'user' | 'admin';\n    };\n}\n\nfunction authMiddleware(req: AuthRequest, res: Response, next: NextFunction): void {\n    const authHeader = req.headers.authorization;\n\n    if (!authHeader || !authHeader.startsWith('Bearer ')) {\n        res.status(401).json({ message: 'To