AuthorizedRoute connecté

frontend/src/app.js

@@ -8,7 +8,7 @@ import DashBoardDev from './pages/DashBoardDev';
 import { ConnectedLogoutPage as LogoutPage } from './pages/logout';
 import { connect } from 'react-redux';
 import { history } from './util/history';
-import { AuthorizedRoute } from './components/AuthorizedRoute';
+import { ConnectedAuthorizedRoute as AuthorizedRoute } from './components/AuthorizedRoute';
 
 const LazyHomePage = React.lazy(() => import('./pages/home.lazy'));
 
@@ -23,8 +23,7 @@ export class App extends Component {
                             <Route path='/logout' exact component={LogoutPage} />
                             <Route path='/home' exact component={LazyHomePage} />
                             <Route path='/dashboard-client' exact component={DashBoardClient} />
-                            <AuthorizedRoute
-                              roles={['ROLE_USER']} required='ROLE_DEV'
+                            <AuthorizedRoute required='ROLE_DEVELOPER'
                               path='/dashboard-dev' exact component={DashBoardDev} />
                             <Route component={() => <Redirect to="/home" />} />
                         </Switch>

frontend/src/components/AuthorizedRoute.js

@@ -1,5 +1,6 @@
 import { Route } from 'react-router';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 
 export function AuthorizedRoute({ required, roles, ...props}) {
   if ( !roles.includes(required) ) {
@@ -17,6 +18,11 @@ export function AuthorizedRoute({ required, roles, ...props}) {
   );
 }
 
+export function ConnectedAuthorizedRoute({ ...props }) {
+  const roles = useSelector(({ session }) => ( session.user ? session.user.roles : [] ));
+  return <AuthorizedRoute roles={roles} {...props} />
+}
+
 AuthorizedRoute.propTypes =  {
  required: PropTypes.string.isRequired,
  roles: PropTypes.arrayOf(PropTypes.string).isRequired