Cómo proteger rutas según sesión en React
Contenido del curso
Solución de la prueba
Próximos pasos
Cómo proteger rutas según sesión en React
Cómo proteger rutas según sesión en React
Contenido del curso
Carlos Esteban León Pinilla
Carlos Esteban León Pinilla
Donovan RM
Jose Luis Bedoya
Juan Mercado
Randy Ochoa
Owen Vassarotto
Andrés Julian Caro Restrepo
Max Andy Diaz Neyra
Ángel de Jesús Avendaño Cruz
Andrés Camilo Salgado
Diego Rubio
Cristian Acalo
Emmanuel Mejia
Ulqernesh Karvenae
Guillermo Prituluk
Gonzalo Gutiérrez Castillo
Johnatan Andrés Arango Rodríguez
Es mejor encapsular las rutas en su propio archivo y no mezclar lógica de vistas o la misma vista en si.
💡 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. 💡
DRY!
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!
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?
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
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.
Les comparto como decidí realizar la protección de rutas. Primero realiza el ejercicio y una vez hecho ahora sí mira esta implementación 😀.
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
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)
Yo cree una funcion en el contexto que retorna los dos valores y asi no repito tanto el codigo
¡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! 💻
✨🦄 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é
para lo de las rutas, yo hice otro componente y manejar de esta manera la logica
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
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.
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;
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.