Introduce authenticated routes.
authorAlexandre Segura <mex.zktk@gmail.com>
Thu, 29 Jun 2017 12:05:09 +0200
changeset 105 0a1d6560acac
parent 104 d48a74232d22
child 106 fffefefed507
Introduce authenticated routes.
client/src/components/Navbar.js
client/src/index.js
client/src/misc/AuthenticatedRoute.js
--- a/client/src/components/Navbar.js	Wed Jun 28 14:44:02 2017 +0200
+++ b/client/src/components/Navbar.js	Thu Jun 29 12:05:09 2017 +0200
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 // import logo from './logo.svg';
 import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
@@ -99,4 +100,4 @@
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(AppNavbar);
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(AppNavbar));
--- a/client/src/index.js	Wed Jun 28 14:44:02 2017 +0200
+++ b/client/src/index.js	Thu Jun 29 12:05:09 2017 +0200
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { Route } from 'react-router';
+import { Route, Switch } from 'react-router';
 import { ConnectedRouter } from 'react-router-redux';
 import createHistory from 'history/createBrowserHistory';
 
@@ -15,6 +15,7 @@
 import registerServiceWorker from './registerServiceWorker';
 import configureStore from './store/configureStore';
 import config from './config';
+import AuthenticatedRoute from './misc/AuthenticatedRoute';
 
 const history = createHistory({
     basename: config.basename
@@ -24,14 +25,14 @@
 ReactDOM.render(
   <Provider store={store}>
     <ConnectedRouter history={history}>
-      <div>
-        <Route exact path="/settings" component={Settings} />
+      <Switch>
         <Route exact path="/sessions/:id" component={Session} />
         <Route exact path="/sessions" component={SessionList} />
         <Route exact path="/register" component={Register} />
         <Route exact path="/login" component={Login} />
+        <AuthenticatedRoute exact path="/settings" component={Settings} store={store} />
         <Route exact path="/" component={App} />
-      </div>
+      </Switch>
     </ConnectedRouter>
   </Provider>,
   document.getElementById('root')
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/misc/AuthenticatedRoute.js	Thu Jun 29 12:05:09 2017 +0200
@@ -0,0 +1,27 @@
+// see https://gist.github.com/fdidron/ebcf52dc1ed62ff7d80725854d631a9e
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Redirect, Route } from 'react-router';
+
+const AuthenticatedRoute = ({component, ...props}) => {
+
+  const { store } = props;
+  const state = store.getState();
+  const isAuthenticated = state.isAuthenticated;
+
+  if (isAuthenticated) {
+    return <Route { ...props } component={ component } />;
+  }
+
+  return <Redirect to="/login" />;
+};
+
+AuthenticatedRoute.propTypes = {
+  component: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.func
+  ])
+};
+
+export default AuthenticatedRoute;