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

Clase 14 de 30 • Curso de React.js: Navegación con React Router

Contenido del curso

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

Resumen

¿Cómo se implementa la autorización en una aplicación web?

La capacidad de un sistema para distinguir qué acciones pueden realizar los usuarios autenticados es crucial. En esta lección, exploramos cómo implementar esta lógica, diferenciando autenticación y autorización. Mientras la autenticación se encarga de identificar a los usuarios, la autorización determina qué permisos tienen. Comenzamos a construir el sistema observando los roles en una aplicación de manejo de contenido.

¿Cómo configuro roles de usuario en una aplicación?

Lista de administradores:
- El primer paso en nuestra implementación es crear una lista de administradores.
- Aunque normalmente esta lista viviría en un backend, por ahora se simula con un arreglo estático en JavaScript.
```
const adminList = ['Iris', 'Retaxmaster', 'Freddy'];
```
Asignación de propiedad isAdmin:
- Verificamos si el usuario está en la lista de administradores al momento del login.
```
const isAdmin = adminList.some(admin => admin === user.username);
user.isAdmin = isAdmin;
```

¿Cómo se utiliza la propiedad isAdmin en un componente?

Una vez determinado si el usuario es administrador, podemos condicionar la interfaz de usuario para mostrar u ocultar ciertas opciones:

Condicional en Blogpost:
- Se importa un hook de autenticación que nos permite verificar el estado y propiedades del usuario autenticado.
```
import { useAuth } from '../path/to/hooks';
```
Renderizado condicional de botones:
- Dependiendo de los permisos, se puede decidir si mostrar o no un botón para eliminar posteos para usuarios administradores.
```
if (userIsAdmin) {
    return <button>Eliminar blogpost</button>;
}
```

¿Cómo permitir a los autores editar su propio contenido?

Además de los administradores, es razonable que los autores puedan modificar su propio contenido. Vamos a permitir esto mediante la siguiente lógica condicional:

Variable canDelete:
- Definimos una variable que determina si el usuario actual puede eliminar un blogpost, ya sea porque es administrador o porque es el autor del contenido.
```
const canDelete = user.isAdmin || (blogpost.author === user.username);
```
Renderizado basado en canDelete:
- La siguiente lógica gestiona el renderizado del botón de eliminación dependiendo de canDelete.
```
if (canDelete) {
    return <button>Eliminar blogpost</button>;
}
```

¿Cómo puedo mejorar este sistema con múltiples listas de permisos?

El reto en este contexto es expandir la lógica para manejar múltiples roles, posiblemente con listas separadas para administradores, editores, y beta testers, cada una capaz de realizar diferentes acciones. Por ejemplo, los beta testers podrían tener acceso a funcionalidades exclusivas, mientras que los editores podrían modificar el contenido sin eliminarlo.

Listas múltiples:

Crear listas para cada tipo de usuario con permisos especiales.

const adminList = ['Username1', 'Username2'];
const editorList = ['Username3', 'Username4'];
const betaTesterList = ['Username5', 'Username6'];

Revisión de permisos:
- Añadir lógica para verificar la pertenencia de un usuario a cada lista y actuar en consecuencia.

Crear un sistema de autorización robusto no solo protege la integridad del contenido, sino que también permite a los usuarios una interacción más personalizada y segura con la aplicación. Experimente y adapte estos ejemplos a sus necesidades, ¡la práctica perfecciona!

Juan Diego Mejia Maestre

student•

🎭 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. 🎯

Carlos Eduardo Gomez García

teacher•

Gaston Blanco

Juan Diego Bermudez

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

Eudes Serpa

Rubén Ernesto Aragón Gil

Leandro Andres Suarez Vece

Seba Cardoso

Yaneth Hernández

Sebastian Carballo

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

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

Fundamentos de navegación en la web

Navegación Web con React Router: Fundamentos y Prácticas Avanzadas

Server-side Rendering vs Single Page Applications: Ventajas y Desventajas

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalación de React Router DOM 6 en un proyecto React

Uso de Hash Router en Aplicaciones Web con React Router DOM

Creación de Rutas Dinámicas con React Router DOM 6

Navegación en React Router: Uso de Link y NavLink

Rutas dinámicas con React Router DOM y useParams

Uso de useNavigate en React Router DOM para navegación dinámica

Uso de Outlet y Nested Routes en React Router DOM 6

Fake authentication con React Router DOM 6

Autenticación y Autorización en Apps con React Router y Hooks

Control de Acceso en Menú con Autenticación React

Protección de Rutas con React Router y Hooks