Guarding Routes

README.md

@@ -148,3 +148,4 @@ Dependency Installation: **`npm i --save redux-thunk`**
 11. Forwarding Unauthenticated Users: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/9c7f59c8d90bb35c903253fd537cc92767fdc8d7)
 12. Redirecting the User to the Checkout Page (In case the User is New and has Built a Burger w/o Login/Signup): [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/35c2a66977084175b1c9bd14b42f5158c56ee736)
 13. Persistent `auth` State with `localStorage` && Fixing Routing Errors using `withRouter()` from `react-router`: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/c80a5e75710dd07156e264a8b058a3ff1c920d99)
+14. Guarding Routes: [Commit Details]()

src/App.js

@@ -1,6 +1,6 @@
 // LIBRARY IMPORTS
 import React, { Component } from 'react';
-import { Route, Switch, withRouter } from 'react-router-dom';
+import { Route, Switch, withRouter, Redirect } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 // CUSTOM COMPONENTS
@@ -18,24 +18,38 @@ class App extends Component {
   }
 
   render() {
+    const routes = this.props.isAuth ? (
+      <Switch>
+        <Route path="/checkout" component={Checkout} />
+        <Route path="/orders" component={Orders} />
+        <Route path="/logout" component={Logout} />
+        <Route path="/" component={BurgerBuilder} />
+        <Redirect to="/" />
+      </Switch>
+    ): (
+      <Switch>
+        <Route path="/auth" component={Auth} />
+        <Route path="/" component={BurgerBuilder} />
+        <Redirect to="/" />
+      </Switch>
+    );
+
     return (
       <div>
         <Layout>
-          <Switch>
-            <Route path="/checkout" component={Checkout} />
-            <Route path="/orders" component={Orders} />
-            <Route path="/auth" component={Auth} />
-            <Route path="/logout" component={Logout} />
-            <Route path="/" component={BurgerBuilder} />
-          </Switch>
+          {routes}
         </Layout>
       </div>
     );
   }
 }
 
+const mapStateToProps = state => ({
+  isAuth: state.auth.token !== null,
+});
+
 const mapDispatchToProps = dispatch => ({
   onTryAutoSignup: () => dispatch(actions.authCheckState()),
 });
 
-export default withRouter(connect(null, mapDispatchToProps)(App));
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));