La autenticación mediante JSON Web Token (JWT) se usa ampliamente para proteger las API y garantizar que solo los usuarios autorizados puedan acceder a ciertos datos. En esta publicación, le mostraremos cómo configurar JWT en el backend con Node.js y en el frontend con ReactJS usando TypeScript, desde la generación de tokens hasta la gestión segura de sesiones de usuario.
Primero, creemos una API con Node.js, Express y TypeScript que genere y valide tokens JWT.
Crea un nuevo proyecto e instala las dependencias principales:
npm init -y npm install express jsonwebtoken bcryptjs dotenv npm install -D typescript @types/node @types/express @types/jsonwebtoken @types/bcryptjs ts-node
Cree un archivo tsconfig.json para la configuración de TypeScript:
{ "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "strict": true, "esModuleInterop": true }, "include": ["src/**/*.ts"], "exclude": ["node_modules"] }
Cree una estructura simple, comenzando con un archivo server.ts y una carpeta de rutas para organizar las rutas de autenticación.
import express, { Application } from 'express'; import dotenv from 'dotenv'; import authRoutes from './routes/authRoutes'; dotenv.config(); const app: Application = express(); app.use(express.json()); app.use('/api/auth', authRoutes); const PORT = process.env.PORT || 5000; app.listen(PORT, () => console.log(`Servidor rodando na porta ${PORT}`));
Crear un archivo para rutas de autenticación. Aquí tendremos una ruta de inicio de sesión que validará al usuario y devolverá el token JWT.
import express, { Request, Response } from 'express'; import jwt from 'jsonwebtoken'; import bcrypt from 'bcryptjs'; const router = express.Router(); // Simulação de banco de dados const users = [{ username: 'usuario', password: 'senha123' }]; router.post('/login', async (req: Request, res: Response) => { const { username, password } = req.body; const user = users.find(u => u.username === username); if (!user || !(await bcrypt.compare(password, user.password))) { return res.status(401).json({ message: 'Credenciais inválidas' }); } const token = jwt.sign({ username }, process.env.JWT_SECRET as string, { expiresIn: '1h' }); res.json({ token }); }); export default router;
Agregar middleware para proteger rutas que requieren autenticación.
import { Request, Response, NextFunction } from 'express'; import jwt from 'jsonwebtoken'; interface JwtPayload { username: string; } export const authMiddleware = (req: Request, res: Response, next: NextFunction): void => { const token = req.headers['authorization']; if (!token) { res.status(403).json({ message: 'Token não fornecido' }); return; } jwt.verify(token, process.env.JWT_SECRET as string, (err, decoded) => { if (err) { res.status(401).json({ message: 'Token inválido' }); return; } req.user = decoded as JwtPayload; next(); }); };
En la interfaz, usaremos React para manejar la autenticación, enviar credenciales y almacenar el token JWT.
Primero, cree un componente Login.tsx para capturar las credenciales del usuario y enviar una solicitud de inicio de sesión al backend.
import React, { useState } from 'react'; import axios from 'axios'; const Login: React.FC = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState (''); const [error, setError] = useState (''); const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); try { const response = await axios.post('/api/auth/login', { username, password }); localStorage.setItem('token', response.data.token); window.location.href = '/dashboard'; } catch (err) { setError('Credenciais inválidas'); } }; return ( ); }; export default Login;
Crear una función para rutas protegidas, usando el token JWT para acceder a la API.
import React from 'react'; import { Route, Redirect, RouteProps } from 'react-router-dom'; interface PrivateRouteProps extends RouteProps { component: React.ComponentType; } const PrivateRoute: React.FC = ({ component: Component, ...rest }) => ( localStorage.getItem('token') ? ( ) : ( ) } /> ); export default PrivateRoute;
Configurar axios para incluir automáticamente el token JWT en solicitudes protegidas.
import axios from 'axios'; const token = localStorage.getItem('token'); if (token) { axios.defaults.headers.common['Authorization'] = token; } export default axios;
Ahora, crea un ejemplo de una página protegida que requiere el token para acceder.
import React, { useEffect, useState } from 'react'; import axios from './axiosConfig'; const Dashboard: React.FC = () => { const [data, setData] = useState(''); useEffect(() => { const fetchData = async () => { try { const response = await axios.get('/api/protected'); setData(response.data.message); } catch (error) { console.error(error); } }; fetchData(); }, []); return {data || 'Carregando...'}
; }; export default Dashboard;
Con estos pasos, configuramos la autenticación JWT completa en TypeScript para un proyecto que usa Node.js en el backend y React en el frontend. Este enfoque es altamente seguro, eficiente y ampliamente adoptado para proteger las aplicaciones modernas.
Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.
Copyright© 2022 湘ICP备2022001581号-3