Introduce authenticated routes.
--- 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;