Saltar a contenido

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 y token desde localStorage 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 desde AuthService.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>
  );
};