Protected Routes

App.js

const routes = getRoutes(user.permissions)

<Switch>
	{routes.map((route, i) => (
		<Route
			key={i}
			path={route.path}
			render={props => {
				const Layout = route.layout
				const Comp = route.component
				return (
					<Layout>
						<ErrorBoundary>
							<Comp />
						</ErrorBoundary>
					</Layout>
				);
			}}
			exact={route.exact}
		/>
	))}
	<Route component={NoMatch} />
</Switch>

routes.js

const commonRoutes = [
	{
		id: 'home',
		path: '/',
		component: Home,
		exact: true,
	},
	{
		id: 'logout',
		path: '/logout',
		component: Logout,
	},	
	{
		id: 'support',
		path: '/support',
		component: Support
	}
]

const reservedRoutes = {
	BACKOFFICE: {
		id: 'admin',
		path: '/admin',
		component: Admin,
		layout: Default
	}
}

export default permissions => {
	const routes = [...commonRoutes]
	if (!permissions) return routes
	forEach(keys(permissions), key => {
		if (permissions[key] && reservedRoutes[key]) routes.push(reservedRoutes[key]);
	})
	return routes
}