Al desarrollar proyectos en React que no son una simple una SPA, una librería muy útil para controlar el enrutado de nuestra aplicación es React Router:

Esta librería parte de un core el cual emplean otros paquetes para proveernos de esta funcionalidad bien en web, bien en nativo.

El caso que quiero tratar en este artículo es el de una aplicación web con algunas de sus rutas privadas, es decir, rutas a las que el usuario sólo puede acceder si ha iniciado sesión. Para resolver este problema he dado con una solución bastante limpia (en mi opinión) la cual voy a describir a continuación. Me ha gustado principalmente por dos motivos:

• Es 100% reutilizable, es decir, añadir rutas privadas a la aplicación es inmediato
• Es bastante corta en cuanto a código se refiere, algo que siempre es de agradecer y está 100% integrada con la librería React Router.

Dicho esto, vamos a verla!

Nota. En el proyecto donde la he implementado estoy gestionando la autenticación mediante Redux, pero sentíos libres de cambiar dicha comprobación por cualquier otro sistema.

Definición del componente PrivateRoute

Puesto que la idea es encapsular la comprobación de si un usuario puede o no acceder a cierta ruta, lo que haremos será definir un nuevo componente con el siguiente aspecto:

Este componente devuelve un componente Route con tres características:

• No tiene definida la propiedad path , de modo que dicha ruta siempre se va a pintar, dado que es válida para cualquier path.
• Emplea el patrón render props aprovechando la propiedad render del componente Route . De este modo, podemos establecer lo que se renderea dentro del componente Route .
• Dentro de esta propiedad render es donde realizamos la comprobación de si el usuario inició o no sesión. En caso afirmativo devolvemos el componente pasado como propiedad y en caso negativo (y aprovechando la versión 4 de React Route) devolvemos un componente Redirect que al renderearse provocará que React Route redirija a la ruta que le indiquemos en la propiedad to .

Por lo demás y como os comentaba al principio del artículo, este componente PrivateRoute queda envuelto por el HOC connect para acceder al estado de Redux y poder comprobar el estado del usuario.

Definición del componente PublicRoute

Si habéis entendido el componente PrivateRoute , el componente PublicRoute es prácticamente igual nada más que alterando la lógica situada dentro de la propiedad render del componente Route :

Cómo usar PublicRoute y PrivateRoute

Una vez que ya tenemos ambos componentes listos la forma de emplearlos es muy sencilla: siempre que queramos proteger o habilitar el acceso público de una ruta la definiremos por medio de ellos.

Es decir, en vez de definir las rutas mediante el componente Route de React Router, emplearemos PublicRoute y PrivateRoute :

<HashRouter>
  <Switch>
    <PublicRoute
      path={appRoutes.loginRoute()}
      component={LoginScene}
    />
    <PrivateRoute
      path={appRoutes.logoutRoute()}
      component={LogoutScene}
    />
    <PrivateRoute
      path={appRoutes.userCreateRoute()}
      component={UserCreateScene}
    />
    <PrivateRoute
      path={appRoutes.userEditRoute()}
      component={UserEditScene}
    />
    <PrivateRoute
      path={appRoutes.userDetailRoute()}
      component={UserDetailScene}
    />
    <PrivateRoute
      exact
      path={appRoutes.usersRoute()}
      component={UsersScene}
    />
  </Switch>
</HashRouter>

Como veis, el proceso queda muy simple y se integra perfectamente con la librería React Router. Además, al tener aislada la comprobación en sendos archivos resultará muy rápido cambiar a otro sistema (como por ejemplo moviéndonos de Redux a ReactN).

Finalmente, si esta alternativa no os ha convencido existe otra, también basada en HOC’s, pero que prescinde del empleo del componente Route para a cambio, definir sendos componentes que realicen la comprobación antes de renderear el componente al que envuelven. Os dejo un enlace donde está perfectamente explicado por si tenéis curiosidad:

¿Quieres recibir más artículos como este?

Suscríbete a nuestra newsletter: