ReactJs: Crear rutas públicas y privadas con React Router Dom

En este artículo, vamos a implementar rutas públicas y privadas con React Router Dom, pero la idea debería ser similar en otras librerías de enrutamiento que tengamos a la mano.

React Router Dom es una librería de enrutamiento muy sencilla que permite definir rutas dentro de nuestro proyecto y navegar entre ellas. Las rutas se comparan con la URL actual y pueden ser comparadas usando expresiones regulares y fragmentos de ruta.

La idea de este artículo es crear tres tipos de rutas para nuestro proyecto:

Página Inicio: vendría a ser una ruta pública, a la que todos los usuarios puedan acceder.
Login: será una ruta restringida, lo que significa que sólo debería ser accesible por usuarios no autentificados, ya que no tiene mucho sentido que un usuario autenticado pueda acceder a las páginas de login/registro.
Dashboard: Será una ruta privada a la que sólo deben acceder los usuarios autentificados.

PD: Para este caso estaré usando {user} que tengo como contexto en la autenticación de usuarios con GraphQL

Contenidos ocultar

1 Rutas privadas con React Router Dom

2 Rutas públicas y restringidas

Rutas privadas con React Router Dom

La idea es renderizar un componente siempre y cuando el usuario esté registrado o haya iniciado sesión previamente.

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

const PrivateRoute = ({ component: Component, ...rest }) => {
    const { user } = useContext(AuthContext)

    const render = props => {
        if (!isAuthenticated) {
            return <Redirect to="/login" />;
        }

        return <Component {...props} />;
    };

    return <Route {...rest} render={render} />;
}

export default PrivateRoute;

Rutas públicas y restringidas

«Route» de «react-router-dom» es una ruta pública por default, pero vamos hacer que sea restringida de alguna manera.

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

const PublicRoute = ({ component: Component, ...rest }) => {
  const { user } = useContext(AuthContext)

  const render = props => {
    if (user && rest.restricted) {
      return <Redirect to="/dashboard" />
    }
    return <Component {...props} />
  }
  return <Route {...rest} render={render} />
}

export default PublicRoute

Ahora que tenemos listo, lo tenemos que agregar dentro de app.js o donde vayan sus rutas.

Para fines prácticos vamos a ignorar todo lo que haya en app.js y solo agregar el código que vayamos a usar.

import { PublicRoute, PrivateRoute } from './utils/AuthRoute'

const App = () => {
return(
 <Router>
  <Switch>
      <PublicRoute component={Home} path="/" exact />
      <PublicRoute restricted component={Login} path="/login" exact />
      PrivateRoute component={Dashboard} path="/dashboard" exact />
  </Switch>
 <Router>
)}

Para nuestro pagina restringida agregamos restricted: <PublicRoute restricted component={Login} path=»/login» exact /> esto redigirá hacia «dashboard» si y solo si ya se haya logueado.

Este ejemplo se ha creado con la versión 5. En teoría debería funcionar con las nuevas versiones y crear rutas públicas y privadas con React Router sería así de sencillo.

Rutas privadas con React Router Dom

Rutas públicas y restringidas

Appatico