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