2

SO I'm trying to implement a user role/permission implementation in React using react-boilerplate. However, the routing used in here is somehow dynamic, in contrast to the standard

<Router> <Route><Route> </Router>

format.

Now I have seen this function onEnter of react-router and my colleague advised me that this could be of use for user roles.

So I was wondering if there's a way to access it via dynamic routing? From what I could see from the routing code snippet of react-boilerplate, there's no way I could declare it.

app/routes.js


 ....
 return [
    {
      path: '/',
      name: 'home',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          System.import('pages/Login'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([component]) => {
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }, {
      path: '/pt',
      name: 'home-pt',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          System.import('pages/Home'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([component]) => {
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
      childRoutes: [
        {
          path: '/pt/info/share',
          name: 'pt-share-info',
          getComponent(nextState, cb) {
            const importModules = Promise.all([
              System.import('pages/Share'),
            ]);

            const renderRoute = loadModule(cb);

            importModules.then(([component]) => {
              renderRoute(component);
            });

            importModules.catch(errorLoading);
          }
        }, {
          path: '/pt/info/request',
          name: 'home-pt',
          getComponent(nextState, cb) {
            const importModules = Promise.all([
              System.import('pages/Request'),
            ]);

            const renderRoute = loadModule(cb);

            importModules.then(([component]) => {
              renderRoute(component);
            });

            importModules.catch(errorLoading);
          }
        }
      ]
    },  {
      path: '*',
      name: 'notfound',
      getComponent(nextState, cb) {
        System.import('containers/NotFoundPage')
          .then(loadModule(cb))
          .catch(errorLoading);
      },
    },
  ];

PS. I have also seen this react-router-role-authorization, and is wondering if I could integrate it with the current setup of react-boilerplate?

anobilisgorse
  • 906
  • 2
  • 11
  • 25
  • 1
    Have you [checked this out](https://github.com/mxstbr/login-flow)? It's from the author of react-boilerplate. Hope you find something useful. – Mihir Nov 22 '16 at 11:42

0 Answers0