Context
AuthContext.jsx
Contexto global de autenticación para la aplicación React
Función principal
Proporciona un contexto (AuthContext
) que permite manejar de forma centralizada:
- El estado del usuario autenticado
- Las funciones de inicio y cierre de sesión
- La persistencia de sesión mediante
localStorage
- La validación automática del token JWT al recargar la página
API expuesta desde el Contexto
Elemento | Tipo | Descripción |
---|---|---|
user |
Object | Objeto del usuario autenticado o null si no hay sesión activa |
login() |
Function | Función para iniciar sesión con usuario y contraseña, retorna el role |
logout() |
Function | Función para cerrar sesión, limpia el estado y el almacenamiento local |
isLoading |
boolean | true mientras se verifica la sesión inicial (útil para proteger rutas) |
Comportamiento detallado
- Persistencia de sesión (
useEffect
): - Recupera
user
ytoken
desdelocalStorage
al iniciar la app. - Usa
jwt-decode
para validar que el token no esté expirado. -
Si el token está expirado o es inválido, se borra la sesión automáticamente.
-
Inicio de sesión (
login
): - Llama al
loginService(username, password)
. - Decodifica el token JWT.
- Guarda la información del usuario y el token en
localStorage
:user
,token
,username
,role
.
- Establece el usuario autenticado en el estado React.
-
Retorna el
role
del usuario para navegación condicional. -
Cierre de sesión (
logout
): - Elimina los datos del usuario tanto del estado como de
localStorage
.
Dependencias
- React:
createContext
,useEffect
,useState
- Servicio:
loginService
desdeAuthService.js
- Librería externa:
jwt-decode
Ejemplo completo de uso
// LoginPage.jsx
import { useContext, useState } from 'react';
import { AuthContext } from '../context/AuthContext';
const LoginPage = () => {
const { login, user, isLoading } = useContext(AuthContext);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const role = await login(username, password);
console.log('Login exitoso como:', role);
} catch (error) {
console.error('Error al iniciar sesión:', error);
}
};
if (isLoading) return <p>Cargando sesión...</p>;
if (user) return <p>Bienvenido, {user.username}</p>;
return (
<form onSubmit={handleSubmit}>
<input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Usuario" />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Contraseña" />
<button type="submit">Iniciar sesión</button>
</form>
);
};