Gestión de acesso a rutas privadas

webapp/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Authenticate from './pages/Authenticate/Authenticate.js';
 import Home from './pages/Home/Home.js';
 import Clasico from './pages/Clasico/Clasico.js';
@@ -7,19 +7,24 @@ import WrongRoute from './pages/WrongRoute/WrongRoute.js';
 import Stats from './pages/Stats/Stats.js';
 import './App.css';
 import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
+import { ProtectedRoute } from './routers/ProtectedRoute.js';
 
 function App() {
+
   return (
     <BrowserRouter>
       <Routes>
         {/** Rutas públicas */}
         <Route path='/' element={<Authenticate />} />
+        <Route path='/login' element={<Authenticate />} />
 
         {/** Rutas privadas */}
-        <Route path='/home' element={<Home />} />
-        <Route path='/home/clasico' element={<Clasico />} />
-        <Route path='/home/bateria' element={<Bateria />} />
-        <Route path='/stats' element={<Stats />} />
+        <Route element = {<ProtectedRoute /> }>
+             <Route path='/home' element={<Home />} />
+             <Route path='/home/clasico' element={<Clasico />} />
+             <Route path='/home/bateria' element={<Bateria />} />
+             <Route path='/stats' element={<Stats />} />
+        </Route>
 
         {/* Ruta por defecto */}
         <Route path='*' element={<WrongRoute />} />

webapp/src/routers/ProtectedRoute.js

@@ -0,0 +1,9 @@
+import { Navigate, Outlet } from 'react-router-dom'
+
+export const ProtectedRoute = ({children, redirectTo= "/login"}) => {
+    const token = localStorage.getItem('token');
+    if(token == null || token == undefined){
+        return <Navigate to={redirectTo}/>
+    }
+    return children ? children : <Outlet />
+}