Code review: Protección de Rutas

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

Clase anteriorSiguiente clase

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?