No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Code review: Protecci贸n de Rutas

7/9
Recursos

Aportes 10

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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:

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!

馃挕 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. 馃挕

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 鈥榮ign-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
para lo de las rutas, yo hice otro componente y manejar de esta manera la logica ![](https://static.platzi.com/media/user_upload/image-1e8008ad-44ce-41d7-9049-0654295b620f.jpg)
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 ![](https://static.platzi.com/media/user_upload/image-6549f863-b6f7-486d-ad41-73c177cb8769.jpg)![](https://static.platzi.com/media/user_upload/image-c46487a2-f434-40eb-8a01-fe68813f28f5.jpg)![](https://static.platzi.com/media/user_upload/image-bd05a0a1-4bed-4e0e-8d61-893419d287a0.jpg)![](https://static.platzi.com/media/user_upload/image-ff17a8fd-5156-4e84-9aaf-0a8cd9ea568c.jpg)
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. ![](https://static.platzi.com/media/user_upload/image-047e4a39-8a30-4d3d-9d13-cd248fe874d9.jpg) 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 . ![](https://static.platzi.com/media/user_upload/image-b9807bcc-20f6-438d-86e7-eb9aa28dd15b.jpg) 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. ```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; ```
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: ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-02-17%20193230-4c185b2d-8c60-4990-afa8-81c9e30f507c.jpg) 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: ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-02-17%20193653-04e86e18-08c5-478c-8298-ef2199d9a249.jpg) 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.
Yo cree una funcion en el contexto que retorna los dos valores y asi no repito tanto el codigo ![](https://static.platzi.com/media/user_upload/image-c66ac4e8-ea93-4735-b10c-ced4c924434a.jpg)