CursosEmpresasBlogLiveConfPrecios

Code review: Protección de Rutas

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

Clase anteriorSiguiente clase

Contenido del curso

Cómo presentar pruebas técnicas con React.js
  • 1
    Prueba técnica para React.js Developers

    Prueba técnica para React.js Developers

    01:36
  • 2
    Setup del proyecto con React y Vite

    Setup del proyecto con React y Vite

    04:02
  • 3
    Issues a resolver para completar la prueba

    Issues a resolver para completar la prueba

    07:30
Solución de la prueba
  • 4
    Code review: LocalStorage en React.js

    Code review: LocalStorage en React.js

    11:16
  • 5
    Code review: Vistas Dinámicas para el SignIn

    Code review: Vistas Dinámicas para el SignIn

    06:17
  • 6
    Code review: React Context y FormData

    Code review: React Context y FormData

    04:45
  • 7
    Code review: Protección de Rutas

    Code review: Protección de Rutas

    05:04
  • 8
    Code review: Entregando la Prueba

    Code review: Entregando la Prueba

    05:54
Próximos pasos
  • 9
    ¿Migramos a Next.js?

    ¿Migramos a Next.js?

    00:46
    Carlos Esteban León Pinilla

    Carlos Esteban León Pinilla

    student•
    hace 2 años

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

    Screenshot 2023-08-09 at 4.52.45 PM.png
    Asi se ven en su propio archivo.
    Screenshot 2023-08-09 at 4.54.22 PM.png
    Quedando mas limpio nuestro app.jsx:
    Screenshot 2023-08-09 at 4.54.58 PM.png

    Carlos Esteban León Pinilla

    Carlos Esteban León Pinilla

    student•
    hace 2 años

    💡 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

      Donovan RM

      student•
      hace 2 años

      DRY!

    Jose Luis Bedoya

    Jose Luis Bedoya

    student•
    hace 3 años

    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

    Juan Mercado

    student•
    hace 3 años

    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

      Randy Ochoa

      student•
      hace 2 años

      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

      Owen Vassarotto

      student•
      hace 2 años

      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

    Andrés Julian Caro Restrepo

    student•
    hace 2 años

    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

    Max Andy Diaz Neyra

    student•
    hace 6 meses

    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

    Ángel de Jesús Avendaño Cruz

    student•
    hace 9 meses

    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

    Andrés Camilo Salgado

    student•
    hace 2 años

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

    Diego Rubio

    Diego Rubio

    student•
    hace 8 meses

    ¡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:

    👉 <https://github.com/darubiomunoz/prueba-tecnica-reactjs>

    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

    Cristian Acalo

    student•
    hace un año

    ✨🦄 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

    Emmanuel Mejia

    student•
    hace 2 años

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

    Ulqernesh Karvenae

    Ulqernesh Karvenae

    student•
    hace 2 años

    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

    Guillermo Prituluk

    student•
    hace 2 años

    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

    Gonzalo Gutiérrez Castillo

    student•
    hace 2 años

    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

    Johnatan Andrés Arango Rodríguez

    student•
    hace 2 años

    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.

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads