React Router Dom Protected Route Always Redirects to Login during refresh page

Question

I’m building a full stack react application. I have implement React router v4 protected route. everything going good but the problem is that after user login on refresh link it redirect to login page.

Here is the auth.js code: it is use for check authentication during login and logout time.

class Auth {
  constructor() {
    this.authenticated = false;
  }

  login(cb) {
    this.authenticated = true;
    cb();
    console.log("login status"+this.authenticated)
  }

  logout(cb) {
    this.authenticated = false;
    cb();
  }

  isAuthenticated() {
    console.log("check status"+this.authenticated)
    return this.authenticated;
  }
}
export default new Auth();

Here is ProtectedRoute.js

import React from "react";
import { Route, Redirect,withRouter } from "react-router-dom";
import Auth from "./Auth";

const ProtectedRoute = ({component: Component,...rest}) => {
  return (
    <Route
      {...rest}
      render={props => {
        if (Auth.isAuthenticated()) {
          return <Component {...props} />;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/admin/login",
                state: {
                  from: props.location
                }
              }}
            />
          );
        }
      }}
    />
  );
};
export default withRouter(ProtectedRoute);

Here is app.js

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route} from 'react-router-dom';
import './css/style.css'
import './css/font-awesome.css'
import './css/jquery-ui.css'
import './App.css';
import './css/bootstrap.css'
import 'bootstrap'
import 'jquery'
import Login from './components/Login';
import Dashboard from './components/Dashboard'
import Users from './components/Users'
import UserProfile from './components/UserProfile';
import Categories from './components/Categories'
import ContactUs from './components/ContactUs'
import QueryDetails from './components/QueryDetails'
import EditProfile from './components/EditProfile'
import AdminProfile from './components/AdminProfile'
import ChangePassword from './components/ChangePassword'
import SaleOrPurchaseList from './components/SaleOrPurchaseList'
import ProductDetails from './components/ProductDetails'
import ReportList from './components/ReportList'
import NotFound from './components/NotFound'
import ProtectedRoute  from './components/ProtectedRoute';

class App extends Component {
  render() {
    return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/admin/login" component={Login}/>
        <ProtectedRoute path='/admin/dashboard' component={Dashboard}/>
        <ProtectedRoute path='/admin/users' component={Users}/>
        <ProtectedRoute path='/admin/userProfile' component={UserProfile}/>
        <ProtectedRoute path='/admin/saleOrPurchaseList' component={SaleOrPurchaseList}/>
        <ProtectedRoute path='/admin/ProductDetails' component={ProductDetails}/>
        <ProtectedRoute path='/admin/categories' component={Categories}/>
        <ProtectedRoute path='/admin/reportList' component={ReportList}/>  
        <ProtectedRoute path='/admin/queries' component={ContactUs}/>
        <ProtectedRoute path='/admin/query_details' component={QueryDetails}/>
        <ProtectedRoute path='/admin/profile' component={AdminProfile}/>
        <ProtectedRoute path='/admin/edit_profile' component={EditProfile}/>
        <ProtectedRoute path='/admin/change_password' component={ChangePassword}/>
        <Route path="*" component={NotFound} />
      </Switch>
    </BrowserRouter> 
    );
  }
}

export default App;

Answer 1

You can use localStorage in order to handle the Authentication. In login function you can set the value of auth state like this localStorage.setItem('isAuth', authenticated). In logout function localStorage.removeItem('isAuth'). Change the PrivateRoute as per the localStorage

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({
    component: Component,
    ...rest
}) => {
    const isAuth = localStorage.getItem('isLoggedIn');
    return (
        <Route
            {...rest}
            render={props =>
                isAuth ? (
                    <Component {...props} {...rest} />
                ) : (
                        <Redirect
                            to={{
                                pathname: "/admin/login",
                                state: {
                                  from: props.location
                                }
                            }}
                        />
                    )
                }
        />
    );
}

export default PrivateRoute;