Roles y Permisos Avanzados en React Router v6

Clase 17 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 implementar rutas y permisos avanzados en tu aplicación?

Gestionar rutas y permisos avanzados en una aplicación puede parecer un desafío monumental, pero con el enfoque adecuado, se transforma en uno de los aspectos más gratificantes del desarrollo web. Al aprender a manejar rutas dinámicas y condiciones de autorización, aseguramos un comportamiento lógico y seguro para todos los usuarios de la plataforma. Aquí, te mostraremos cómo abordar un reto que implica estas habilidades.

¿Por qué son importantes las rutas dinámicas?

Las rutas dinámicas nos permiten crear URLs específicas para cada usuario, personalizando la experiencia de navegación y organización dentro de la aplicación. En el caso de Platzi, por ejemplo, las rutas de perfil son únicas para cada usuario, comparables a cómo Twitter gestiona sus URLs de perfil.

Para lograr esto, utilizamos el hook useParams de React Router que nos permite capturar parámetros dinámicos de la URL y mostrarlos de manera adecuada.

import { useParams } from 'react-router-dom';

const UserProfile = () => {
  const { username } = useParams();
  // lógica para mostrar el perfil del usuario
};

¿Cómo se gestionan los permisos de edición?

No todas las rutas son solo para mostrar información; algunas requieren capacidades de edición. La clave está en permitir que solo el dueño del perfil o un administrador autorizado puedan realizar cambios.

Verificación de la cuenta: Comparamos la información del usuario autenticado con la del perfil accedido. Si coinciden, mostramos opciones adicionales de edición.
Roles de usuario: Implementamos roles, donde el usuario con permisos de administrador puede modificar cualquier perfil, mientras que los usuarios estándar solo pueden editar el suyo.

¿Cuál es el siguiente paso en la aplicación de estos conceptos?

Una vez que comprendas y pratices la creación de rutas dinámicas y la gestión de permisos a detalle, es crucial aplicar tu conocimiento en proyectos reales. La mejor manera de consolidar lo aprendido es enfrentarte a retos, como el que hemos propuesto, para afinar estas habilidades.

A medida que te adentras en este proceso, recuerda:

Interactuar con la comunidad: Comparte tus avances y problemas en foros o plataformas como Platzi. Aprender de las experiencias de tus pares es invaluable.
Documentar tus intentos: Sin importar el resultado, documentar tus pasos te permite evaluar qué funcionó y qué no, y compartirlo puede ser una fuente de aprendizaje para otros.
Iteración y mejora continua: El desarrollo es un viaje de aprendizaje constante. Experimenta con distintas soluciones y mejoras a medida que avanzas.

Siguiendo estos consejos y enfrentando los desafíos con determinación y curiosidad, estarás un paso más cerca de dominar la creación de aplicaciones complejas con React y React Router. ¡Adelante y sigue aprendiendo!

Gonzalo Gutiérrez Castillo

student•

Complete los 3 retos, la parte a la que agregé mayor funcionalidad fue al blog, ya que se puede editar y eliminar comentarios, el titulo y el contenido del BlogPost. Para lograr todas las validaciones de los roles y las acciones permitidas y no permitidas en el blog use un nuevo custom hook que hice yo mismo. Espero les agrade mi solución. No creo que sea la forma más optima de hacerlo, pero me sirvió para reforzar mas cosas sobre el estado, la composición de componentes, useReducer, y los closures.import React, { useReducer } from "react"; const initialState = { //role:"visitor", read:true, selfWrite:false, selfDelete:false, elseWrite:false, elseDelete:false,}; //Action Typesconst actionTypes = { admin: 'admin', editor: 'editor', customer: 'customer', visitor: 'visitor',} const reducerObject = (state, action) => { const actions = { [actionTypes.admin]: { ...state, userName:action.payload, role:actionTypes.admin, selfWrite:true, selfDelete:true, elseWrite:true, elseDelete:true, }, [actionTypes.editor]: { ...state, userName:action.payload, role:actionTypes.editor, selfWrite:true, selfDelete:true, elseWrite:false, elseDelete:false, }, [actionTypes.customer]: { ...state, userName:action.payload, role:actionTypes.customer, selfWrite:true, selfDelete:true, elseWrite:false, elseDelete:false, }, }; return actions[action.type] || initialState;}; export function useAuthReducer() { const [state, dispatch] = useReducer(reducerObject, initialState); //Action creators const onAdmin = (userName) => {dispatch({type: actionTypes.admin, payload:userName});} const onEditor = (userName) => {dispatch({type: actionTypes.editor, payload:userName});} const onCustomer = (userName) => {dispatch({type: actionTypes.customer, payload:userName});} const onvisitor = () => {dispatch(initialState);} // const onWrite = (eventValue) => { // dispatch({type: actionTypes.write, payload:eventValue}); // } //create a switch expression executing the 3 above functions according to the userRole parameter const dispatchUser = (user)=>{ if(!!user){ switch (user.userRole) { case 'admin': onAdmin(user.userName); break; case 'editor': onEditor(user.userName); break; case 'customer': onCustomer(user.userName); break; default: break; }}else{ onvisitor(); } } return [state, dispatchUser] // const onDelete = (eventValue) => {}

Custom hook, useBlogContent,js:

import React from 'react'

export const useBlogContent = ({ contentToChange, actions, setBlogdataLocal }) => {
    
    const { onEdit, onDelete } = actions
    
    const [edit, setEdit] = React.useState(false);
    const [inputContent, setInputContent] = React.useState(contentToChange);
    const [loading, setLoading] = React.useState(false);

    const handleEdit = () => {
        setEdit(true);
    };

    const handleSave = () => {
        setLoading(true);
        setInputContent(inputContent);
        setBlogdataLocal(onEdit);
        setEdit(false);
        setLoading(false);
    };

    const handleDelete = () => {
        setLoading(true);
        setBlogdataLocal(onDelete);
        setLoading(false);
    };

    const handleCancelEdit = () => {
        setEdit(false);
        const currentValue = inputContent;
        setInputContent(currentValue);
    };

    return {
        edit,
        inputContent,
        loading,

        setInputContent,
        handleEdit,
        handleSave,
        handleDelete,
        handleCancelEdit,
    };
};
```Componente BlogPost (Composicion de componente, permisos, usa el customhook useBlogContent):
```js
import React from 'react'
import { useParams, useNavigate } from 'react-router-dom'
//import { blogdata } from './blogData'
import { useAuth } from './auth'
import Comments from './Comments/Comments'
import Comment from './Comments/Comment'
import RequestButton from './Buttons/RequestButton'
import { useBlogContent } from './useBlogContent'


function BlogPost({blogDataStates}) {
    const [blogdataLocal, setBlogdataLocal] = blogDataStates

    const navigate = useNavigate()
    const auth = useAuth()
    const { user } = auth
    const { slug } = useParams()
    const { title, content, author, comments } = blogdataLocal.find(post => post.slug === slug)
    const returnToBlog = () => {
        navigate('/blog')
    }

    const updateActions = {
        'EDIT': 'EDIT',
    }

    const updateTitlePost = (action, inputContent) => (
        blogdataLocal.map(post => {
            if (post.slug === slug) {
                if(action === updateActions.EDIT){
                    return {
                        ...post,
                        title: inputContent
                    };
                }
            }
            return post;
        })
    )

    const updateContentPost = (action, inputContent) => (
        blogdataLocal.map(post => {
            if (post.slug === slug) {
                if(action === updateActions.EDIT){
                    return {
                        ...post,
                        content: inputContent
                    };
                }
            }
            return post;
        })
    )

    const deletePost = () => {
        const updatedBlogData = blogdataLocal.filter(post => post.slug !== slug);
        setBlogdataLocal(updatedBlogData);
        navigate('/blog')
    }
        
    

    const {
        edit:editTitle,
        inputContent: inputContentTitle,
        loading: loadingTitle,
        
        setInputContent: setInputContentTitle,
        handleEdit: handleEditTitle,
        handleCancelEdit: handleCancelEditTitle,
        handleSave: handleSaveTitle,
    } = useBlogContent({
      contentToChange: title,
      actions: {
        onEdit: () => updateTitlePost(updateActions.EDIT, inputContentTitle),
      },
      setBlogdataLocal,
    });

    const {
        edit:editContent,
        inputContent: inputContentPostContent,
        loading: loadingContent,
        
        setInputContent: setInputContentPostContent,
        handleEdit: handleEditContent,
        handleCancelEdit: handleCancelEditContent,
        handleSave: handleSaveContent,
    } = useBlogContent({
      contentToChange: content,
      actions: {
        onEdit: () => updateContentPost(updateActions.EDIT, inputContentPostContent),
      },
      setBlogdataLocal,
    });

  return (
    <>
      <header>
        {!editTitle && <h3>{title}</h3>}
        {editTitle && (
          <input
            type="text"
            value={inputContentTitle}
            onChange={(e) => setInputContentTitle(e.target.value)}
          />
        )}
        {!editTitle && (
          <div>
            {(user?.elseWrite || user?.userName === author) && (
              <button onClick={handleEditTitle}>Editar título</button>
            )}
          </div>
        )}
        {editTitle && (
          <div>
            <RequestButton
              loading={loadingTitle}
              requestType={"EDIT"}
              onClick={handleSaveTitle}
            >
              Guardar
            </RequestButton>
            <button onClick={handleCancelEditTitle}>Cancelar</button>
          </div>
        )}
      </header>
        <br />
      <button onClick={returnToBlog}>Volver al blog</button>
      <p>{author}</p>
      {!editContent && <p>{content}</p>}
        {editContent && (
            <textarea
            value={inputContentPostContent}
            onChange={(e) => setInputContentPostContent(e.target.value)}
            />
        )}
        {!editContent && (
           <>
                {user?.elseWrite && <button onClick={handleEditContent}>Editar Contenido</button>}
                
                {user?.userName === author && (!user?.elseWrite || !user?.elseDelete) &&
                    <button onClick={handleEditContent}>Editar Contenido</button>
                }
            </> 
        )}
        {editContent && (
            <div>
                <RequestButton
                    loading={loadingContent}
                    requestType={"EDIT"}
                    onClick={handleSaveContent}
                >
                    Guardar
                </RequestButton>
                <button onClick={handleCancelEditContent}>Cancelar</button>
            </div>
        )}
        <br />
        {user?.elseDelete && <RequestButton requestType={"DELETE"} onClick={deletePost}>Borrar Post</RequestButton>}
        {user?.userName === author && (!user?.elseWrite || !user?.elseDelete) &&
            <RequestButton requestType={"DELETE"} onClick={deletePost}>Borrar Post</RequestButton>
        }
        
      
      <br />
      <Comments>
        {comments.map(({ idUser, content }, index) => (
          <Comment
            key={index}
            idUser={idUser}
            content={content}
            slug={slug}
            setBlogdataLocal={setBlogdataLocal}
            blogdataLocal={blogdataLocal}
          />
        ))}
      </Comments>
      {/*crea */}
    </>
  );
}


export default BlogPost
```Componente Comment (Composicion de componente, permisos, usa el customhook useBlogContent):
```js
import React from 'react'
import { users, useAuth } from '../auth'
import RequestButton from '../Buttons/RequestButton';
import { useBlogContent } from '../useBlogContent.js';

function Comment({idUser, content, slug, blogdataLocal, setBlogdataLocal}) {
  const author = findUser(idUser)
  const { user } = useAuth()

  const updateActions = {
    'EDIT': 'EDIT',
    'DELETE': 'DELETE'
  }

  const updatedBlogData = (action, inputContent) => (
    blogdataLocal.map(post => {
      if (post.slug === slug) {
        let updatedComments;
        if(action === updateActions.DELETE){
          updatedComments = post.comments.filter(comment => comment.idUser !== idUser);
        } else if(action === updateActions.EDIT){
          updatedComments = post.comments.map(comment => {
            if(comment.idUser === idUser){
              return {
                ...comment,
                content: inputContent
              };
            }
            return comment;
          });
        }
        return {
          ...post,
          comments: updatedComments
        };
      }
      return post;
    })
  )

  const {
    edit,
    inputContent,
    loading,
    
    setInputContent,
    handleEdit,
    handleCancelEdit,
    handleDelete: handleDeleteComment,
    handleSave,
  } = useBlogContent({
    contentToChange: content,
    actions: {
      onEdit:()=> updatedBlogData(updateActions.EDIT,inputContent),
      onDelete:()=> updatedBlogData(updateActions.DELETE, inputContent),
    },
    setBlogdataLocal,
  });

  return (
    <article>
      <h5>{author.userName}</h5>
      <div>
        {!edit && <p>{content}</p>}
        {edit && <textarea value={inputContent} onChange={(e) => setInputContent(e.target.value)} />}
      </div>
      {!edit && <div>
        {user?.elseWrite && <button  onClick={handleEdit}>Editar</button>}
        {user?.elseDelete  && <RequestButton requestType={'DELETE'} onClick={handleDeleteComment} loading={loading}>Borrar</RequestButton>}
        {user?.userName === author.userName && (!user?.elseWrite||!user?.elseDelete) && (
              <>
                <button onClick={handleEdit}>Editar</button>
                <RequestButton requestType={'DELETE'} loading={loading} onClick={handleDeleteComment}>Borrar</RequestButton>
              </>
          )}
      </div>}
      {
        edit && <div>
          <RequestButton loading={loading} requestType={'EDIT'} onClick={handleSave}>Guardar</RequestButton>
          <button onClick={handleCancelEdit}>Cancelar</button>
        </div>
      }
    </article>
  );
}

//a function that iterates over a list of objects and return the object that have the same userName that i am looking for
export function findUser(idUser){
  let user = users.find(user => user.id === idUser)
  user = user ? user: {userName: 'Anónimo'}
  return user   
}

export default Comment

auth.js (aqui resuelvo el segundo y tercer reto, además uso el reducer para permitir la escalabilidad de mas roles):

import React from 'react'
import { useNavigate, Navigate, useLocation } from 'react-router-dom';
import { useAuthReducer } from './AuthReducer'

const AuthContext = React.createContext();
  const roles = {
      admin: 'admin',
      editor: 'editor',
      customer: 'customer',
      visitor: 'visitor',
    };
  
  export const users = [
    {
      id: 1,
      userName: "Andres",
      role: roles.admin,
    },
    {
      id: 2,
      userName: "Felipe",
      role: roles.editor,
    },
    {
      id: 3,
      userName: "Pedro",
      role: roles.customer,
    },
  ];

export function AuthProvider({children}) {
    //const [user, setUser] = useState(null)
    const [user, dispatchUser] = useAuthReducer();
    const navigate = useNavigate()

    const login = ({ userName, callback }) => {
      //revisar si el usuario existe o lo crea como visitante
      const userFound = users.find((usu) => usu.userName === userName);
      if (userFound !== undefined) {
        dispatchUser({ userName: userFound.userName, userRole: userFound.role })}else{
          dispatchUser(null);
        }
      if (callback){
        callback();
      } else{
        navigate("/profile");
      }
      
    }

    const logout = () => {
      dispatchUser(null);
      navigate('/')     
    }

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

export function useAuth() {
    const auth = React.useContext(AuthContext)
    return auth
}

export function RequireAuth(props) {
    const auth = useAuth();
    let location = useLocation();
  
    if (!auth.user.role) {
      return <Navigate to="/login" state={{ from: location }} replace/>
    }
  
    return props.children
  }
```AuthReducer.js:
```js
import React, { useReducer } from "react";

const initialState = {
    //role:"visitor",
    read:true,
    selfWrite:false,
    selfDelete:false,
    elseWrite:false,
    elseDelete:false,
};

//Action Types
const actionTypes = {
    admin: 'admin',
    editor: 'editor',
    customer: 'customer',
    visitor: 'visitor',
}

const reducerObject = (state, action) => {
  const actions = {
    
    [actionTypes.admin]: {
        ...state,
        userName:action.payload,
        role:actionTypes.admin,
        selfWrite:true,
        selfDelete:true,
        elseWrite:true,
        elseDelete:true,
    },
    [actionTypes.editor]: {
        ...state,
        userName:action.payload,
        role:actionTypes.editor,
        selfWrite:true,
        selfDelete:true,
        elseWrite:false,
        elseDelete:false,
    }, 
    [actionTypes.customer]: {
        ...state,
        userName:action.payload,
        role:actionTypes.customer,
        selfWrite:true,
        selfDelete:true,
        elseWrite:false,
        elseDelete:false,
    }, 
  };
  return actions[action.type] || initialState;
};

export function useAuthReducer() {

  const [state, dispatch] = useReducer(reducerObject, initialState);
	
	//Action creators
  const onAdmin = (userName) => {dispatch({type: actionTypes.admin, payload:userName});}
  const onEditor = (userName) => {dispatch({type: actionTypes.editor, payload:userName});}
  const onCustomer = (userName) => {dispatch({type: actionTypes.customer, payload:userName});}
  const onvisitor = () => {dispatch(initialState);}
    //a switch expression executing the 3 above functions according to the userRole parameter
    const dispatchUser = (user)=>{
      if(!!user){
        switch (user.userRole) {
        case 'admin':
            onAdmin(user.userName);
            break;
        case 'editor':
            onEditor(user.userName);
            break;
        case 'customer':
            onCustomer(user.userName);
            break;
        default:
            break;
      }}else{
        onvisitor();
      }
    }
    return [state, dispatchUser]     //   const onDelete = (eventValue) => {
}

Roles y Permisos Avanzados en React Router v6

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

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

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

Mejorando la Redirección Post-Login en Aplicaciones Web