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

问题

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;

回答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;

回答2:

this.authenticated is false by default so whenever ProtectedRoute renders before call to Auth.login it will redirect to login page. You need to ensure that this.authenticated gets the correct value before rendering ProtectedRoute.

Note that it is very likely that your code doesn't trigger a rerender of ProtectedRoute after call to Auth.login or Auth.logout. So ProtectedRoute won't react to this.authenticated changes.

来源：https://stackoverflow.com/questions/55240578/react-router-dom-protected-route-always-redirects-to-login-during-refresh-page