React Router 4. Protected Route. Even Simpler.

React Router 4 “official way” of doing role authorization is simple and clear, but a bit ugly to my taste. This is the simplified version to achieve the same goal:

const ProtectedRoute 
= ({ isAllowed, ...props }) =>
isAllowed
? <Route {...props}/>
: <Redirect to="/authentificate"/>;
const _App = ({ lastTab, isTokenVerified })=> 
<Switch>
<Route exact path="/authentificate" component={Login}/>
<ProtectedRoute
isAllowed={isTokenVerified}
exact
path="/secrets"
component={Secrets}/>
<ProtectedRoute
isAllowed={isTokenVerified}
exact
path="/polices"
component={Polices}/>
<ProtectedRoute
isAllowed={isTokenVerified}
exact
path="/grants" component={Grants}/>
<Redirect from="/" to={lastTab}/>
</Switch>

And yes — React Router 4 is the only case I know developers did not screw their product after the 3rd version but instead made it awesome.