AuthorizedRoute avec vérification roles

frontend/src/app.js

@@ -23,7 +23,9 @@ 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 path='/dashboard-dev' exact component={DashBoardDev} />
+                            <AuthorizedRoute
+                              roles={['ROLE_USER']} required='ROLE_DEV'
+                              path='/dashboard-dev' exact component={DashBoardDev} />
                             <Route component={() => <Redirect to="/home" />} />
                         </Switch>
                     </HashRouter>

frontend/src/components/AuthorizedRoute.js

@@ -1,7 +1,23 @@
 import { Route } from 'react-router';
+import PropTypes from 'prop-types';
+
+export function AuthorizedRoute({ required, roles, ...props}) {
+  if ( !roles.includes(required) ) {
+    return (
+      <div className="message is-danger">
+        <div className="message-body"> 
+          Vous ne pouvez pas accéder à cette page.
+        </div>
+      </div>
+    );
+  }
 
-export function AuthorizedRoute({...props}) {
   return (
     <Route {...props} />
-  )
+  );
 }
+
+AuthorizedRoute.propTypes =  {
+ required: PropTypes.string.isRequired,
+ roles: PropTypes.arrayOf(PropTypes.string).isRequired
+};