Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » ReactJS » ¿Cómo puedo proteger rutas con react router dom v6?

ReactJS - ¿Cómo puedo proteger rutas con react router dom v6?

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

¿Cómo puedo proteger rutas con react router dom v6?

Publicado por Emma (1 intervención) el 15/11/2021 04:29:36
¿Cómo puedo proteger rutas con la libreria react router dom v6?
Estoy creando mi primera app en react y me gustaria saber como puedo proteger determinadas rutas, en este caso todas las rutas que se encuentren en `/dashboard/` en esta área solo podran ingresar usuarios que tengan credenciales, es decir que se encuentren registrados.


## Públicas (cualquier persona puede ver estas páginas)
- http://localhost:3000/
- http://localhost:3000/register
- http://localhost:3000/login

## Privadas (cuando el usuario inicia sesión):
- http://localhost:3000/dashboard/
- http://localhost:3000/dashboard/accounting
- http://localhost:3000/dashboard/employee
- http://localhost:3000/dashboard/ecommerce


### package.json

"react-router-dom": "^6.0.1",

### Index.js
1
2
3
4
5
6
7
8
9
10
11
import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter } from "react-router-dom";
    import App from "./App";
 
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById("root")
    );
### App.js
1
2
3
4
5
6
7
8
9
10
11
12
import AppRouter from "./routers/AppRouter";
    import "./css/main.css";
 
    function App() {
      return (
        <>
          <AppRouter />
        </>
      );
    }
 
    export default App;

### AppRouter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Route, Routes } from "react-router-dom";
    import HomeView from "../components/views/public/HomeView";
    import LoginView from "../components/views/public/LoginView";
    import NotFound from "../components/views/public/NotFound";
    import RegisterView from "../components/views/public/RegisterView";
 
    const AppRouter = () => {
      return (
        <div>
          <Routes>
            {/* Rutas publicas: */}
            <Route path="/" element={<HomeView />} />
            <Route path="/login" element={<LoginView />} />
            <Route path="/register" element={<RegisterView />} />
            {/* Rutas privadas: */}
            <Route path="dashboard/*" element={<Dashboard />} />
          </Routes>
        </div>
      );
    };
    export default AppRouter;
### Dashboard
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Routes, Route } from "react-router-dom";
    import AccountingHomeView from "../components/views/accounting/AccountingHomeView";
    import { EcommerceHomeView } from "../ecommerce/EcommerceHomeView";
    import EmployeeHomeView from "../employee/EmployeeHomeView";
    import NotFound from "../public/NotFound";
    import DashboardHomeView from "./DashboardHomeView";
 
    const Dashboard = function () {
      return (
        <>
          <Routes>
            <Route path="/" element={<DashboardHomeView />} />
            <Route path="accounting" element={<AccountingHomeView />} />
            <Route path="employee" element={<EmployeeHomeView />} />
            <Route path="ecommerce" element={<EcommerceHomeView />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </>
      );
    };
 
    export default Dashboard;
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de 7aamin
Val: 9
Ha mantenido su posición en ReactJS (en relación al último mes)
Gráfica de ReactJS

¿Cómo puedo proteger rutas con react router dom v6?

Publicado por 7aamin (26 intervenciones) el 28/11/2021 16:55:59
Hola, eso se maneja con sesiones administradas por Token, es decir, el usuario registrado cuando inicia sesión, el servidor le entregara un Token si es que las credenciales con correctas, y ese token se almacenará en el navegador.

Cada vez que el usuario quiera entrar a una de esas paginas Privadas, el Front-end consultara si existe algun Token almacenado en el navegador y si existe, lo enviara junto con la peticion al servidor, el servidor evaluará que el token sea correcto (Usando un middleware) y si lo es, enviara la informacion solicitada en formato JSON, si no es correcto, enviará un JSON con la la informacion de por que no se pudo acceder, el front-end usará esa información para saber que hacer, ya sea para redirigirlo a la pagina de inicio de sesión o registro o como sea que tu quieras.

1
2
3
4
5
6
7
8
9
10
11
12
13
import { useHistory } from 'react-router-dom';
const [user, setUser] = useState("");
const [password, setPassword] = useState("");
const history = useHistory();
 
axios.post('https://www.your.api.com/auth', {
    user: user, pass: password
}).then(response => {
    if (response['success']) {
        localStorage.setItem('_Token', response['token']);})
        history.push('dashboard')
    } else history.push('login');
.catch(err => console.error(err));
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar