Code review: Protección de Rutas

Clase 7 de 9 • Prueba Técnica: E-commerce Profesional con React.js

Resumen

Proteger las rutas en una aplicación web es un aspecto fundamental para garantizar que los usuarios tienen acceso únicamente a los recursos que les corresponden según su estado de autenticación. En este artículo, exploraremos cómo implementar esta protección de rutas en un proyecto específico, con la finalidad de permitir o restringir el acceso a las funcionalidades de una plataforma de comercio electrónico llamada Shopee. Analizaremos los pasos involucrados en este proceso, cómo el componente NavBar interactúa con la información del usuario, y cómo modificar las rutas en función del estado de autenticación del usuario.

¿Cómo proteger las rutas según la autenticación del usuario?

La protección de rutas depende de la información que tengamos sobre el estado de autenticación del usuario. Es esencial determinar si el usuario está registrado o no para controlar su acceso.

¿Cuáles son los pasos para implementar el enrutamiento condicional?

La implementación de un enrutamiento dependiente de la autenticación comprende varios pasos clave:

Determinar el estado de la cuenta del usuario en el componente NavBar: Es necesario comprender si el usuario tiene una cuenta para mostrar ítems específicos en el NavBar. Esto implica acceder a la información almacenada en el local storage y el estado global de la aplicación.
Definir el comportamiento al hacer clic en el logo para usuarios no autenticados: Cuando un usuario que no ha iniciado sesión cliquea en el logo, debe ser redirigido a la página de inicio de sesión en lugar de llevarlo a la página inicial (home).
Modificar las rutas para restringir el acceso a no autenticados: La configuración de las rutas debe evitar que los usuarios no autenticados vean cualquier parte de la aplicación. Esto se logra utilizando una combinación de context y el almacenamiento local para verificar la autenticación y, basado en ella, redirigir al usuario adecuadamente.

¿Cómo se implementa en NavBar el conocimiento del estado del usuario?

Con la técnica de conditional rendering, se puede determinar si mostrar o no ciertos elementos en el NavBar, como el carrito de compras o opciones de cuenta. El NavBar debe ser capaz de distinguir entre usuarios autenticados y aquellos que han cerrado sesión, mostrando la información relevante acorde a cada caso.

¿Qué cambios se requieren en las rutas según la autenticación?

Con el uso de la función navigate, se puede redirigir a los usuarios no autenticados siempre a la página de inicio de sesión, prohibiéndoles el acceso al home de la aplicación. Este enfoque garantiza que solo los usuarios con las credenciales adecuadas puedan acceder a las funcionalidades completas de Shopee.

¿Cómo se optimiza la experiencia de usuario con el componente shopping cart?

Además de proteger las rutas, se puede mejorar significativamente la experiencia de usuario desglosando el carrito de compras como un componente independiente. Este polimorfismo permite una estructura más modular y organizada del código. Los pasos son:

Crear un componente shopping cart separado.
Importarlo y renderizarlo dentro del componente NavBar.

Con estas operaciones, la aplicación no solo mejora su seguridad y lógica de acceso, sino que también refina su estructura interna, preparándose para impresionar a cualquier entrevistador demostrando buenas prácticas de desarrollo.

La protección de rutas y la estructuración adecuada de los componentes son parte esencial del desarrollo web segura y efectiva. Al implementar estas estrategias, nos aseguramos de ofrecer una experiencia de usuario óptima mientras mantenemos nuestra aplicación organizada y segura.-avatar

Carlos Esteban León Pinilla

student•

Es mejor encapsular las rutas en su propio archivo y no mezclar lógica de vistas o la misma vista en si.

Asi se ven en su propio archivo.

Quedando mas limpio nuestro app.jsx:

Carlos Esteban León Pinilla

student•

💡 El estar repitiendo si la cuenta existe y si esta logeado en cada lado no es bueno, imagina que luego debes cambiar algo y te toca ir a todos los archivos a cambiar lo mismo. Es mejor dejar eso en el contexto de la aplicación. 💡

Donovan RM

student•

DRY!

Jose Luis Bedoya

student•

yo preferí permitir que el usuario pudiera ver los elementos, las rutas que protegí fueron las de cuando el usuario está con su sesión activa!

Juan Mercado

student•

Como experiencia de usuario no es mejor que el cliente si pueda ver los productos hasta agregarlos, pero al momento de hacer checkout redirigir al login?

Randy Ochoa

student•

Yo tambien creo eso asi que eso fue lo que hice darle libertad de ver toda la pagina al usuario pero a la hora de hacer la compra lo redirijo a SignIn

Owen Vassarotto

student•

Sería lo mejor, sino se pierden muchos usuarios debido a eso. Es como que te obligan a registrarte para ver qué ofrecen y al UX no le gusta eso.

Andrés Julian Caro Restrepo

student•

Les comparto como decidí realizar la protección de rutas. Primero realiza el ejercicio y una vez hecho ahora sí mira esta implementación 😀.

En primer lugar decidí permitirle el acceso al usuario a la ruta Home y con sus categorias. El resto de rutas (ordenes, mi cuenta, luego del checkout...) sí están protegidas.
Dejé de usar el hook useRoutes e importé Routes y Route de react.
Organicé las rutas como normalmente lo haría con estas librerías importadas.
Creé el componente PrivateRoutes usando Outlet y Navigate de react-router-dom. En este es en donde debemos de colocar nuestro condicional del cual dependerán las rutas protegidas (en este caso decidí depender del signOut state. Si dicho estado es true entonces navegar a 'sign-in', si es false entonces Outlet (que puede acceder a las rutas children)).
Importé este componente PrivateRoutes en App y lo usé con Route como podrás ver a continuación, dejando como children de este componente aquellas rutas que quiero proteger. // PrivateRoutes.jsx
// App.jsx

Max Andy Diaz Neyra

student•

Yo la proteccion de ruta lo hice de esta forma, pienso que es mejor:

import { useContext } from "react";
import { Navigate, Outlet } from "react-router-dom";
import { ShoppingCartContext } from "../../Context";

export const ProtectedRoute = () => {
  const { signOut } = useContext(ShoppingCartContext);

  const isAuthenticated = !signOut;

  if (!isAuthenticated) {
    return <Navigate to="/sign-in" replace />;
  }

  return <Outlet />;
};

const AppRoutes = () => {
  let routes = useRoutes([
    {
      element: <ProtectedRoute />,
      children:[
        { path: '/', element: <Home /> },
        { path: '/clothes', element: <Home /> },
        { path: '/electronics', element: <Home /> },
        { path: '/furnitures', element: <Home /> },
        { path: '/toys', element: <Home /> },
        { path: '/othes', element: <Home /> },
        { path: '/my-account', element: <MyAccount /> },
        { path: '/my-order', element: <MyOrder /> },
        { path: '/my-orders', element: <MyOrders /> },
        { path: '/my-orders/last', element: <MyOrder /> },
        { path: '/my-orders/:id', element: <MyOrder /> },
      ]
    },
    { path: '/sign-in', element: <SignIn /> },
    { path: '/*', element: <NotFound /> },
  ])

  return routes
}
``````js

Ángel de Jesús Avendaño Cruz

student•

Hola, tengo una duda, quisiera hacer rutas dinámicas sin embargo no lo he logrado, el código es el siguiente: (al final hace cosas raras y no termina por tomar las rutas bien)

Andrés Camilo Salgado

student•

Yo cree una funcion en el contexto que retorna los dos valores y asi no repito tanto el codigo

Diego Rubio

student•

¡Hola a todos! 👋

Quiero compartirles que la API original del curso está rota, lo que puede dificultar completar los ejercicios. Para ayudarles, he creado una versión funcional del proyecto base con una nueva API y código actualizado. 🚀

Pueden clonar este repositorio para seguir el curso sin problemas:

👉 <>

Además, si les resulta útil, no olviden darle una estrella ⭐ al repositorio y seguirme en GitHub. ¡Espero que les sea de ayuda y puedan completar el curso con éxito! 💚

¡Happy coding! 💻

Cristian Acalo

student•

✨🦄 Para la protección de rutas

Creé dos componentes nuevos, uno que comprueba que exista un usuario autenticado, y el otro que comprueba que ningún usuario está autenticado.

Esto debido a que hay vistas que no se deben mostrar cuando un usuario está autenticado o no, pero también existen vistas que solo se deben mostrar cuando el usuario no está autenticado, como el login o el sign out.

Así quedó mi estructura de rutas:

Y esta es la manera en que funciona uno de los dos componentes que mencioné

Emmanuel Mejia

student•

para lo de las rutas, yo hice otro componente y manejar de esta manera la logica

Ulqernesh Karvenae

student•

En mi caso para que se viera mas lindo y que apenas dentren a la aplicación de una no vieran nada muestro en home con un blanco por delante al 60% y si le dan click a cualquier parte de este lo redireccione a crear cuenta, la creamos y podemos ver todo

Guillermo Prituluk

student•

Mi métodos para proteger las rutas son :

1-En el NavBar elimine el componente Link si mi usuario no esta logeado, logrando así eliminar esa interacción.

2-En el App, si el usuario no esta logeado redireccione todos los endpoints hacia <SignIn/>. Esto lo hice por que si el usuario cambiaba el endpoint desde su navegador podía visualizar de igual manera la página .

Lo que veo de malo en mi solución es que repito mucho código fallando así en el principio de DRY.

Gonzalo Gutiérrez Castillo

student•

Use un custom Hook que usa useReducer para manejar el estado global, y useContext para enviar la información del usuario autenticado, ademas de una funcion requireAuth para comprobar el estado global y la autentocación del usuario y redirigir a las rutas correspondientes.

import { useRoutes, BrowserRouter } from 'react-router-dom'
import Home from '../Home';
import MyAccount from '../MyAccount';
import MyOrder from '../MyOrder';
import MyOrders from '../MyOrders';
import NotFound from '../NotFound';
import SignIn from '../SignIn';
import Navbar from '../../Components/Navbar';
import CheckoutSideMenu from '../../Components/CheckoutSideMenu'
import './App.css'
import { ShoppingCartProvider } from '../../Context';
import { AuthProvider, RequireAuth } from '../../Context/useAuth';
import SignUpPage from '../SignUp';


const AppRoutes = ()=>{
  let routes = useRoutes([
    {path:'/',element: <Home/>},
    {path:'/clothes',element: <Home/>},
    {path:'/electronics',element: <Home/>},
    {path:'/furnitures',element: <Home/>},
    {path:'/toys',element: <Home/>},
    {path:'/others',element: <Home/>},
    {path:'/my-account',element: <RequireAuth><MyAccount/></RequireAuth>},
    {path:'/my-order',element: <RequireAuth><MyOrder/></RequireAuth>},
    {path:'/my-orders',element: <RequireAuth><MyOrders/></RequireAuth>},
    {path:'/my-order/last',element: <RequireAuth><MyOrder/></RequireAuth>},
    {path:'/my-order/:id',element: <RequireAuth><MyOrder/></RequireAuth>},
    {path:'/sign-in',element: <SignIn/>},
    {path:'/sign-up',element: <SignUpPage/>},
    {path:'/*',element: <NotFound/>},
  ]);
  return routes;
}

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <ShoppingCartProvider>
          <AppRoutes/>
          <Navbar/>
          <CheckoutSideMenu></CheckoutSideMenu>
        </ShoppingCartProvider>
      </AuthProvider>
    </BrowserRouter>
  )
}

export default App;

Johnatan Andrés Arango Rodríguez

student•

Les comparto la estrategia que use para proteger las rutas, me parece más sencilla de implementar y mantener. Lo Primero fue modificar las rutas:

Entonces puse un elemento sin ruta llamado ProtectedRoutes, y dentro como hijos puse todas las rutas que deberían estar protegidas. Por fuera de este elemento deje las rutas no protegidas, sign-in y la de notFound.

En el componente ProtectedRoutes puse el siguiente código:

Acá traigo del contexto el booleano que me indica si el usuario está logueado o no, y dependiendo retorno Outlet (o sea, lo que le mande como hijo al componente), o una redirección a /sign-in. Y ya eso sería todo.

import { useContext } from "react";
import { Navigate, Outlet } from "react-router-dom";
import { ShoppingCartContext } from "../../Context";

export const ProtectedRoute = () => {
  const { signOut } = useContext(ShoppingCartContext);

  const isAuthenticated = !signOut;

  if (!isAuthenticated) {
    return <Navigate to="/sign-in" replace />;
  }

  return <Outlet />;
};

const AppRoutes = () => {
  let routes = useRoutes([
    {
      element: <ProtectedRoute />,
      children:[
        { path: '/', element: <Home /> },
        { path: '/clothes', element: <Home /> },
        { path: '/electronics', element: <Home /> },
        { path: '/furnitures', element: <Home /> },
        { path: '/toys', element: <Home /> },
        { path: '/othes', element: <Home /> },
        { path: '/my-account', element: <MyAccount /> },
        { path: '/my-order', element: <MyOrder /> },
        { path: '/my-orders', element: <MyOrders /> },
        { path: '/my-orders/last', element: <MyOrder /> },
        { path: '/my-orders/:id', element: <MyOrder /> },
      ]
    },
    { path: '/sign-in', element: <SignIn /> },
    { path: '/*', element: <NotFound /> },
  ])

  return routes
}
``````js

import { useRoutes, BrowserRouter } from 'react-router-dom'
import Home from '../Home';
import MyAccount from '../MyAccount';
import MyOrder from '../MyOrder';
import MyOrders from '../MyOrders';
import NotFound from '../NotFound';
import SignIn from '../SignIn';
import Navbar from '../../Components/Navbar';
import CheckoutSideMenu from '../../Components/CheckoutSideMenu'
import './App.css'
import { ShoppingCartProvider } from '../../Context';
import { AuthProvider, RequireAuth } from '../../Context/useAuth';
import SignUpPage from '../SignUp';


const AppRoutes = ()=>{
  let routes = useRoutes([
    {path:'/',element: <Home/>},
    {path:'/clothes',element: <Home/>},
    {path:'/electronics',element: <Home/>},
    {path:'/furnitures',element: <Home/>},
    {path:'/toys',element: <Home/>},
    {path:'/others',element: <Home/>},
    {path:'/my-account',element: <RequireAuth><MyAccount/></RequireAuth>},
    {path:'/my-order',element: <RequireAuth><MyOrder/></RequireAuth>},
    {path:'/my-orders',element: <RequireAuth><MyOrders/></RequireAuth>},
    {path:'/my-order/last',element: <RequireAuth><MyOrder/></RequireAuth>},
    {path:'/my-order/:id',element: <RequireAuth><MyOrder/></RequireAuth>},
    {path:'/sign-in',element: <SignIn/>},
    {path:'/sign-up',element: <SignUpPage/>},
    {path:'/*',element: <NotFound/>},
  ]);
  return routes;
}

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <ShoppingCartProvider>
          <AppRoutes/>
          <Navbar/>
          <CheckoutSideMenu></CheckoutSideMenu>
        </ShoppingCartProvider>
      </AuthProvider>
    </BrowserRouter>
  )
}

export default App;

Code review: Protección de Rutas

Cómo presentar pruebas técnicas con React.js

Prueba técnica para React.js Developers

Setup del proyecto con React y Vite

Issues a resolver para completar la prueba

Solución de la prueba

Code review: LocalStorage en React.js

Code review: Vistas Dinámicas para el SignIn

Code review: React Context y FormData

Code review: Protección de Rutas

Code review: Entregando la Prueba

Próximos pasos

¿Migramos a Next.js?