2

¿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

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

import AppRouter from "./routers/AppRouter";
import "./css/main.css";

function App() {
  return (
    <>
      <AppRouter />
    </>
  );
}

export default App;

AppRouter

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

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;
1
  • Hola, ¿qué servicio de autenticación estás utilizando? Commented el 15 nov. 2021 a las 19:58

2 respuestas 2

1

Hola te podría dar una solución a tu problema, en mi caso utilizo el servicio de autenticación de Firebase, y lo que realizo es verificar si el existe un usuario activo, es decir, registrado, si es así, puede acceder a las rutas privadas, por lo contrario los redirige a la página de registro o de inicio.

Por ejemplo en el archivo index.js, tengo todas las rutas:

const Index = () => {
  return (
    <BrowserRouter>
        <Switch>
            <Route path="/" exact component={App} />
            <Route path="/login-ecpan-admin" component={Login} />
            <PrivateRoute path="/ecpan-admin">
                <AdminPanel />
            </PrivateRoute>
         </Switch>
     </BrowserRouter>              
</AuthProvider>

); }

Como puedes ver tengo un componente personalizado llamado "PrivateRoute", y el "AuthProvider" el cual es el proveedor de un estado global llamado "AuthContext", en el cual almaceno el usuario autenticado.

AuthPovider

import React, { useEffect, useState } from 'react';
import {auth, onAuthStateChanged} from '../firebase/firebaseConfig';

const AuthContext = React.createContext();

// This context will be present in Main.jsx and ProvateRoute.jsx 
const AuthProvider = ({children}) => {
    const [user, setUser] = useState();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const cancelSuscription = onAuthStateChanged(auth, user => {
            setUser(user)
            setLoading(false)
        });

       return cancelSuscription;
    }, [])

    return (
        <AuthContext.Provider value={{user}}>
            {!loading && children}
        </AuthContext.Provider>
    );
}

export {AuthContext, AuthProvider};

Ahora bien, dicha información la utilizaremos en el componente personalizado que mencioné en un inicio ("PrivateRoute") donde encapsularás las rutas privadas.

PrivateRoute

import React, { useContext } from 'react';
import { Redirect, Route } from 'react-router';
import { AuthContext } from '../contexts';

const PrivateRoute = ({children, ...propierties}) => {
    const {user} = useContext(AuthContext);

    if (user) {
        return <Route {...propierties}>{children}</Route>
    } else {
        return <Redirect to="/login-ecpan-admin" />
    }
}

export default PrivateRoute;

Como se puede apreciar éste componente recibe dos propiedades: children el cual es la ruta que deseas convertir en privada y ...propierties el cual es el path. En éste componente utlizamos redirect para enviar a una ruta específica dependiendo si el usuario está autenticado o no.

Espero que te sirva mi solución. Si tienes preguntas no dudes en planterlas.

1

Para la protección de rutas solo basta tener una variable global que determine si existe una sesión activa y compararlo dentro el atributo "element", por ejemplo:

export const AppRouter = () => {

    const { usuario } = useContext( AuthContext );
    return (
        <BrowserRouter>
            <div  >
                <Routes>
                    <Route path="/login" element={ usuario.logged ? (<Navigate to="/"/>): (<LoginScreen />) }/>
                    <Route path="/*" element={ usuario.logged ? (<DashboardRoutes />):( <Navigate to="/login"/>)} />
                </Routes>
            </div>
        </BrowserRouter>
    )
}

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.