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
?