implement forbidden page

src/ForbiddenPage.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children, ...props }) => (
+    <div style={ props.style } className="page forbidden">
+        { children }
+    </div>
+)

src/PageManager.js

@@ -7,6 +7,7 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group'
 
 import Page from './Page'
 import NavigationBar from './NavigationBar'
+import ForbiddenPage from './ForbiddenPage'
 
 import './PageManager.css';
 
@@ -43,10 +44,17 @@ export class PageManager extends Component {
 		const pages = routes.filter(r => !r.props.noNavbar).map(r => ({ name: r.props.name, path: r.props.path }))
 		const navbars = children.filter(child => child.type === NavigationBar)
 
+		const forbiddenPage = children.find( c => c.type === ForbiddenPage )		
+
 		const renderPages = (pages) => pages.map((page, i) => {
 			const { exact, path, ...props } = page.props
 			return (
-				<Route key={i} exact={exact} path={path} render={() => React.cloneElement(page, { ...props })} />											
+				<Route key={i} exact={exact} path={path} render={() => {
+					if (!this.props.authCheck || (!page.props.protected || this.props.authCheck()))
+						return React.cloneElement(page, { ...props })
+					else
+						return forbiddenPage || null
+				} } />
 			)
 		})
 

src/index.js

@@ -1,27 +1,39 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react'
+import ReactDOM from 'react-dom'
 
-import './index.css';
+import { Redirect } from 'react-router-dom';
+
+import './index.css'
+
+import PageManager from './PageManager'
+import Page from './Page'
+import NavigationBar from './NavigationBar'
+import ForbiddenPage from './ForbiddenPage'
 
-import PageManager from './PageManager';
-import Page from './Page';
-import NavigationBar from './NavigationBar';
 
 ReactDOM.render(
 <div>
-    <PageManager noRouter>
-        <Page style={{ background: 'yellow' }} name="splash" exact path="/splash" noAnim noNavbar >
+    <PageManager 
+        authCheck={() => {
+            // return auth status
+            return true
+        }}
+    >
+        <Page style={{ background: 'yellow' }} name="splash" exact path="/" noAnim >
             <h1>Splash</h1>
         </Page>
-        <Page style={{ background: 'red' }} name="home" exact path="/">
+        <Page style={{ background: 'cyan' }} name="home" exact path="/home">
             <h1>Home</h1>
         </Page>
-        <Page style={{ background: 'green' }} name="page 2" exact path="/two">
+        <Page protected style={{ background: 'green' }} name="page 2" exact path="/two">
             <h1>page 2</h1>
         </Page>
         <Page style={{ background: 'blue' }} name="page 3" exact path="/three">
             <h1>Page 3</h1>
         </Page>
+        <ForbiddenPage style={{ background: 'red' }} name="forbidden" exact path="/forbidden">
+            <Redirect to={{ pathname:"/" }} />
+        </ForbiddenPage>        
         <NavigationBar position="bottom" />
     </PageManager>
 </div>