authWrapperForReact.md

Auth Wrapper for react :

withAuth.js

import React from 'react';
import {routes} from '../app/routes';

export const withAuth = (Component) => {
class Auth extends React.Component {
  state = {}
  componentDidMount() {
    const token = localStorage.getItem('token');
    if (!token) {
      this
        .props
        .history
        .replace(routes.index)
    }
  }
  render() {
    const token = localStorage.getItem('token');
    return (token
      ? (<Component {...this.props}/>)
      : null)
  }
}

return Auth;
}

app.js

import React, {Component, Fragment} from "react";

import LoginContainer from "./containers/logincontainer.js";
import ForgotPasswordContainer from "./containers/forgotpasswordcontainer";
import DashboardContainer from "./containers/dashboardcontainer";
import DataStroiesContainer from "./containers/datastoriescontainer";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {routes} from "./app/routes";
import {withAuth} from './app/withAuth';
import {ToastContainer} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

class App extends Component {
  render() {
    return (
      <Fragment>
        <ToastContainer/>
        <Router>
          <Switch>
            <Route exact path={routes.index} component={LoginContainer}/>
            <Route exact path={routes.forgotpassword} component={ForgotPasswordContainer}/>
            <Route exact path={routes.users} component={withAuth(DashboardContainer)}/> {/* <Route component={} /> */}
            <Route exact path={routes.datastories} component={withAuth(DataStroiesContainer)}/>
          </Switch>
        </Router>
      </Fragment>
    );
  }
}

export default App;