CODEWITHSUNDEEP
reactjsecmascript-6react-router
JuMoGar
JuMoGar

Reputation: 1760

Prevent an user from accessing other routes - ReactJS - React-Router -

I have two environments: 'Administrador' and 'Alumno'. I would like to know how I can do so such that an 'Administrador' user can not access the routes of an 'Alumno' user and vice versa. I am using React-Router 2.4.0. Is this possible with this technology? I am new to ReactJS (I use version 15.4.2).

Another question: Would it be convenient to update to the new version and transpile all my routes?

Here are my routes:

        <Router history={browserHistory}>
            <Route path="/" component={NotFound}/>
            <Redirect from="/alumno" to="/alumno/inicio"/>
            <Redirect from="/administrador" to="/administrador/inicio"/>

            <Route path="/" component={App}>

                <Route path="alumno" component={AppAlumno}>
                    <Route path="inicio" component={Alumno_Inicio}/>
                    <Route path="nueva_incidencia" component={Alumno_NuevaIncidencia}/>
                    <Route path="mis_incidencias" component={Alumno_MisIncidencias}/>
                </Route>

                <Route path="administrador" component={AppAdministrador}>
                    <Route path="inicio" component={Administrador_Inicio}/>
                    <Route path="nueva_incidencia" component={Administrador_NuevaIncidencia}/>
                    <Route path="incidencias_recibidas" component={Administrador_IncidenciasRecibidas}/>
                    <Route path="incidencias_recibidas/nuevo_informe" component={Administrador_NuevoInforme}/>
                    <Route path="informes" component={Administrador_Informes}/>
                    <Route path="informes/nueva_respuesta_informe" component={Administrador_NuevaRespuestaInforme}/>
                </Route>
            </Route>
        </Router>

Thank you.

Upvotes: 2

Views: 2498

Answers (1)

Sammy I.
Sammy I.

Reputation: 2725

So to answer your questions:

For the first question:

Yes, limiting access to routes is possible using this technology. There are several ways to do it, the simplest way to do it is to check for identity of the user in the componentWillMount() function. It may look something like this, depending on how you identify your user as an Administrador or an Alumno:

import React from 'react';
import { browserHistory } from 'react-router';

class YourComponent extends React.Component{

  componentWillMount(){
    //If user is an Alumno, throw them to '/some/path'
    if(this.state.isAlumno)
      browserHistory.push('/some/path');
  }

  render(){
    return <YourJsx />;
  }
}

export default YourComponent;

This way you don't need to change your routes.

You can also achieve the same functionality by having a higher order component (HOC) that returns the component you want to limit access to. If you want to go the HOC way, you first need to create a new component that may look like this:

import React from 'react';
import {browserHistory} from 'react-router';

//This function receives the Component that only some user should access
function RequireAdmin(ComposedComponent){

  class Authenticated extends React.Component {

    componentWillMount(){
      if(this.state.isAlumno)
        browserHistory.push('/some/path');
    }

    render(){
      return <ComposedComponent />;
    }
  }
  //Return the new Component that requires authorization
  return Authenticated;
}

Then, the route that you want to limit access to would look like this:

<Route path="administrador" component={RequireAdmin(AppAdministrador)}>
  ...
</Route>

Personally, I prefer the second way. It makes it clearer on the route which routes require what kind of authorization, and separates the components from the authorization.

To answer the second question:

It depends on how much of a hassle it would be. I'd certainly recommend learning the new API react-router v4, but I don't think it would be worth it to update an already built project, specially one with as many routes as yours.

Hope this helps! Buena suerte con React.

Upvotes: 2

Related Questions