React Router Dom 受保护的路由在刷新页面期间始终重定向到登录 [英] React Router Dom Protected Route Always Redirects to Login during refresh page

问题描述

我正在构建一个完整的堆栈 React 应用程序.我已经实现了 React 路由器 v4 保护路由.一切顺利，但问题是用户登录刷新链接后，它重定向到登录页面.

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.

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();

这里是 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);

这里是 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;

推荐答案

您可以使用 localStorage 来处理身份验证.在登录功能中，您可以像 localStorage.setItem('isAuth', authenticated) 一样设置 auth 状态的值.在注销函数 localStorage.removeItem('isAuth') 中.根据 localStorage

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;

这篇关于React Router Dom 受保护的路由在刷新页面期间始终重定向到登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！