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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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.
