reactjs


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

Related Links

How to ignore .d.ts file inside npm package?
Using goBack function from react-router-redux
Can I create alias routes using react router?
Unable to update the state of my app, console.log inside reducer shows that object has changed, but the state remains same
Change background of parent after Match
React and Google's autocomplete Service and fetching zipcodes
Populating FieldArray based on a JSON file uploaded
componentDidMount not called
ReactJS component not rerendering when props are passed
React Redux … syntax error
How does one set the tabIndex attribute on a draft-js instance?
ComponentDidMount() not working
UIScrollView Canvas Equivalent?
ReactJS - props or propTypes?
React Router V4 structure
Should a view be ordering data?

Categories

HOME
actionscript-3
drupal
internet-explorer
gcc
ssms
netty
hex
nltk
azure-resource-manager
assign
datetimepicker
mingw
download
confluence-rest-api
glympse
hibernate-mapping
android-webview
rtc
comma
ibatis
openam
sonarlint
datasource
formulas
serenity-js
sha
jira-zephyr
inspec
knapsack-problem
dynamic-memory-allocation
checkmarx
typeorm
sqldependency
bytebuffer
sphinx4
ipython-parallel
jbossfuse
selenium3
blockly
loopback
jcr
imageprocessor
dropdownbox
odp.net
wunderground
area
lex
nscollectionview
ninja-forms
redbean
directadmin
autodesk-data-management
nshttpurlresponse
result
cakephp-3.2
weld
encoder
g77
multivalue
px4
bioperl
nservicebus6
r-commander
hellosign
grib
ios-keyboard-extension
sharing
gevent
android-tabs
glade
syslog4j
radar-chart
nugetgallery
skbio
clear
jcomponent
taverna
android-togglebutton
vanilla-forums
eaaccessory
polarion
firewire
eula
stereotype
glog
strcpy
fedena
jsonschema2pojo
fscanf
dateadd
html5-filesystem
mongoid4
ekevent
randomaccessfile
record-locking
wpa
kademlia
dd4t
nsautoreleasepool
magicsuggest
auctex
django-tinymce
databus
mysql-connector
code-organization
virtual-printer
xhtmlrenderer
netduino
xcdatamodel
code-golf
office-2003

Resources

Encrypt Message