Roles y permisos en aplicaciones web: Autenticación y autorización

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:56

Roles y permisos en aplicaciones web: Autenticación y autorización

Curso de React.js: Navegación con React Router

Clase 14 de 30

Clase 14 / 30

Recursos

La autorización en React te permite decidir qué puede hacer cada usuario dentro de tu aplicación según su rol o relación con el contenido. Aquí aprendes a diferenciarla de la autenticación, asignar permisos de administrador y permitir que cada autor controle su propio contenido.

Cuál es la diferencia entre autenticación y autorización

Aunque suenan parecidas, no son lo mismo y conviene tenerlo claro antes de tocar código.

La autenticación identifica personas: responde a la pregunta de quién es quién dentro de tu app. La autorización, en cambio, define qué permisos tiene cada persona ya autenticada [01:00]. Las dos van de la mano, pero la magia ocurre cuando combinas ambas para modificar comportamientos según el usuario.

¿Qué es autorización en una app? Es el sistema que define qué acciones puede ejecutar un usuario autenticado, por ejemplo, eliminar un blog post si es administrador o autor del contenido.

Cómo crear una lista de administradores en el archivo auth

La idea es simular lo que normalmente haría un backend: devolver información sobre el rol del usuario al momento de hacer login.

Dentro de auth.js, se crea una constante adminList con un arreglo de usernames que tendrán superpoderes, por ejemplo Iris y Freddier [03:00]. En un entorno real, esa lista vendría de una base de datos junto con la respuesta de autenticación, pero para fines de aprendizaje se mantiene como arreglo manual.

Después, al construir el objeto user, se evalúa si el username del usuario actual está dentro de adminList usando el método some, que recorre el arreglo y devuelve true si encuentra coincidencia. Ese resultado se guarda en una variable isAdmin y se asigna como propiedad al usuario autenticado [04:30].

javascript const adminList = ['Iris', 'Freddier']; const isAdmin = adminList.some(admin => admin === username); const user = { username, isAdmin };

Cómo mostrar botones según el rol del usuario

Con la propiedad isAdmin lista, el siguiente paso es usarla en los componentes que dependen del permiso.

En blogPost.js se importa el hook useAuth y se evalúa si existe auth.user y si su propiedad isAdmin es true. Solo en ese caso se renderiza el botón de eliminar el blog post [06:30]. Esto significa que cualquier visitante o usuario común jamás verá ese botón, mientras que Iris o Freddier sí podrán hacerlo en cualquier publicación.

javascript {auth.user?.isAdmin && ( <button>Eliminar blog post</button> )}

Al iniciar sesión con Iris y entrar al blog, el botón aparece en todos los posts. Sin sesión o con un usuario común, no se muestra nada distinto.

Cómo permitir que cada autor edite su propio contenido

Un administrador puede borrar todo, pero también el autor original debería poder controlar lo que él mismo creó.

Para resolverlo se crea una variable canDelete que combina dos condiciones con un operador OR. Por un lado, que el usuario sea administrador. Por otro, que el author del blog post coincida con el username autenticado [09:30]. Si cualquiera se cumple, el botón aparece.

javascript const canDelete = auth.user?.isAdmin || blogPost.author === auth.user?.username;

El símbolo ?. es optional chaining, una característica reciente de ECMAScript que evita errores cuando una propiedad anidada no existe. En lugar de validar manualmente que auth.user exista antes de leer username, el operador devuelve undefined sin romper la app [11:00].

¿Para qué sirve el optional chaining en JavaScript? Permite acceder a propiedades anidadas sin verificar manualmente cada nivel. Si algo es null o undefined, devuelve undefined en lugar de lanzar un error.

Qué pasa al probar con distintos usuarios

La prueba final confirma que la lógica funciona en todos los escenarios.

Un usuario aleatorio sin rol: no ve el botón en ningún post.
Freddier, administrador: ve el botón en todos los posts.
Juan DC, autor de un post sobre React: ve el botón solo en su propio contenido, no en los de Diana ni en otros temas que no escribió.

Esa combinación de rol + autoría es la base de los sistemas de permisos en aplicaciones reales, desde un blog hasta un CMS o un dashboard corporativo.

Qué reto debes resolver antes de la siguiente clase

La propuesta es ampliar la lógica con más de una lista de roles para practicar el patrón.

No te quedes solo con administradores. Crea listas adicionales como editores, content creators, beta testers o revisores, y asigna a cada una un comportamiento distinto. Por ejemplo:

Administradores que puedan hacer todo.
Beta testers con acceso a una página secreta.
Editores que puedan borrar comentarios.

No necesitas implementar la acción real, basta con que el botón o la sección aparezca según el rol [14:00]. Cuéntame en los comentarios cómo lo resolviste.

Juan Diego Mejia Maestre

Hace 10 meses

🎭 Autorización por Roles en React

📌 Concepto Clave

🔐 Autenticación → ¿Quién eres? (Login) 🎭 Autorización → ¿Qué puedes hacer? (Permisos)

🏗️ Implementación Básica

1️⃣ Lista de Administradores

javascript

// auth.js
const adminList = ['Iris', 'Retaxmaster', 'Freddy'];

export const login = (username) => {
  const isAdmin = adminList.includes(username);
  
  return {
    username,
    isAdmin
  };
};

2️⃣ Uso en Componentes

javascript

import { useAuth } from './auth';

function BlogPost({ post }) {
  const { user } = useAuth();
  
  // Solo admins y autores pueden eliminar
  const canDelete = user.isAdmin || post.author === user.username;

  return (
    <div>
      <h2>{post.title}</h2>
      <p>Por: {post.author}</p>
      
      {canDelete && (
        <button onClick={handleDelete}>
          🗑️ Eliminar
        </button>
      )}
    </div>
  );
}

🎯 Sistema Multi-Rol

Configuración de Roles

javascript

// auth.js
const roles = {
  admins: ['Iris', 'Retaxmaster'],
  editors: ['Ana', 'Carlos'],
  betaTesters: ['User1', 'User2']
};

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (username) => {
    const userData = {
      username,
      isAdmin: roles.admins.includes(username),
      isEditor: roles.editors.includes(username),
      isBetaTester: roles.betaTesters.includes(username)
    };
    setUser(userData);
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

Permisos por Rol

javascript

function BlogPost({ post }) {
  const { user } = useAuth();
  
  // Permisos específicos
  const isAuthor = post.author === user.username;
  const canDelete = user.isAdmin || isAuthor;
  const canEdit = canDelete || user.isEditor;
  const canViewDraft = user.isBetaTester || user.isEditor || user.isAdmin;

  return (
    <article>
      <h2>{post.title}</h2>
      <p>Por: {post.author}</p>
      
      {canEdit && <button>✏️ Editar</button>}
      {canDelete && <button>🗑️ Eliminar</button>}
      {canViewDraft && post.isDraft && (
        <span>👁️ Vista previa (borrador)</span>
      )}
    </article>
  );
}

🔧 Patrón Avanzado con Hook de Permisos

javascript

// permissions.js
const PERMISSIONS = {
  DELETE_POST: 'delete_post',
  EDIT_POST: 'edit_post',
  VIEW_DRAFTS: 'view_drafts',
  MANAGE_USERS: 'manage_users'
};

const rolePermissions = {
  admin: ['delete_post', 'edit_post', 'view_drafts', 'manage_users'],
  editor: ['edit_post', 'view_drafts'],
  betaTester: ['view_drafts']
};

// Hook personalizado
export const usePermissions = () => {
  const { user } = useAuth();
  
  const hasPermission = (permission) => {
    if (!user || !user.role) return false;
    return rolePermissions[user.role]?.includes(permission) || false;
  };
  
  const canEditPost = (post) => {
    return hasPermission(PERMISSIONS.EDIT_POST) || 
           post.author === user?.username;
  };

  const canDeletePost = (post) => {
    return hasPermission(PERMISSIONS.DELETE_POST) || 
           post.author === user?.username;
  };
  
  return { hasPermission, canEditPost, canDeletePost };
};

Uso del Hook

javascript

function BlogPost({ post }) {
  const { canEditPost, canDeletePost } = usePermissions();

  return (
    <article>
      <h2>{post.title}</h2>
      
      {canEditPost(post) && <button>✏️ Editar</button>}
      {canDeletePost(post) && <button>🗑️ Eliminar</button>}
    </article>
  );
}

🎮 Ejemplo Completo Integrado

javascript

// auth.js
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

const adminList = ['Iris', 'Retaxmaster'];
const editorList = ['Ana', 'Carlos'];
const betaTesterList = ['User1', 'User2'];

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (username) => {
    const userData = {
      username,
      isAdmin: adminList.includes(username),
      isEditor: editorList.includes(username),
      isBetaTester: betaTesterList.includes(username)
    };
    setUser(userData);
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

// BlogPost.jsx
function BlogPost({ post }) {
  const { user } = useAuth();
  
  if (!user) return null;
  
  const isAuthor = post.author === user.username;
  const canEdit = user.isAdmin || user.isEditor || isAuthor;
  const canDelete = user.isAdmin || isAuthor;
  const canViewDraft = user.isAdmin || user.isEditor || user.isBetaTester;

  return (
    <article>
      <h2>{post.title}</h2>
      <p>📝 Por: {post.author}</p>
      <div>{post.content}</div>
      
      <div className="actions">
        {canEdit && (
          <button onClick={() => handleEdit(post.id)}>
            ✏️ Editar
          </button>
        )}
        
        {canDelete && (
          <button onClick={() => handleDelete(post.id)}>
            🗑️ Eliminar
          </button>
        )}
        
        {post.isDraft && canViewDraft && (
          <span className="badge">👁️ Borrador</span>
        )}
      </div>
    </article>
  );
}

// AdminPanel.jsx
function AdminPanel() {
  const { user } = useAuth();

  // Solo admins pueden ver el panel
  if (!user?.isAdmin) {
    return <p>⛔ Acceso denegado</p>;
  }

  return (
    <div>
      <h1>⚙️ Panel de Administración</h1>
      <button>👥 Gestionar Usuarios</button>
      <button>📊 Ver Estadísticas</button>
    </div>
  );
}

📊 Jerarquía de Permisos

👑 Admin
├─ ✅ Eliminar cualquier post
├─ ✅ Editar cualquier post
├─ ✅ Ver borradores
└─ ✅ Gestionar usuarios

✏️ Editor
├─ ❌ Eliminar posts
├─ ✅ Editar cualquier post
└─ ✅ Ver borradores

🧪 Beta Tester
├─ ❌ Eliminar posts
├─ ❌ Editar posts
└─ ✅ Ver borradores

👤 Autor
├─ ✅ Eliminar SU post
├─ ✅ Editar SU post
└─ ❌ Ver otros borradores

✨ Mejores Prácticas

✅ Hacer:

Crear constantes para permisos: PERMISSIONS.DELETE_POST
Usar hooks personalizados: usePermissions()
Verificar permisos en componentes: if (!canDelete) return null
Considerar "autor del contenido" como caso especial
Combinar roles: user.isAdmin || user.isEditor

❌ Evitar:

Hardcodear roles en múltiples archivos
Solo validar en frontend (backend es crítico)
Usar strings mágicos: if (role === 'admin')
Olvidar el caso de "propio contenido"

🛡️ Seguridad Real

javascript

// Frontend (UX mejorada)
if (!user.isAdmin) {
  return null; // Oculta botón
}

// Backend (Seguridad real)
app.delete('/api/posts/:id', (req, res) => {
  if (!req.user.isAdmin && req.user.id !== post.authorId) {
    return res.status(403).json({ error: 'Forbidden' });
  }
  // Procesar eliminación
});

⚠️ Crítico: Frontend = UX. Backend = Seguridad. ¡Siempre valida en el servidor!

🚀 Evolución del Sistema

Nivel 1: isAdmin boolean
    ↓
Nivel 2: Múltiples roles (isAdmin, isEditor)
    ↓
Nivel 3: Sistema de permisos (hasPermission)
    ↓
Nivel 4: Backend + Base de datos + JWT

Este sistema te permite controlar exactamente qué puede hacer cada usuario en tu aplicación, mejorando tanto la seguridad como la experiencia de usuario. 🎯

Comentarios (42)42 comentarios

Carlos Eduardo Gomez García

Hace 4 años

Gaston Blanco

Juan Diego Bermudez

Hace 3 años

Andrés Esteban Rodríguez Jiménez

Federico Ivan Llano

Eduardo Lemus Zavala

Tomas Garcia

Diego Reyes Cabrera

Raycris Maldonado

Andres Felipe Leon Gomez

Juan Castro

Profesor

Eudes Serpa

Rubén Ernesto Aragón Gil

Leandro Andres Suarez Vece

Seba Cardoso

Yaneth Hernández

Sebastian Carballo

Hace 2 años

Harold Zurita Simon

Jonathan Amaya Mendieta

marlon mosquera rivera

Edgardo Luis Jimenez Nuñez

Javier Silva Avendaño

JUAN JOSE HERNANDEZ MUÑOZ

Max Andy Diaz Neyra

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Roles y permisos en aplicaciones web: Autenticación y autorización