Reactjs React路由器Dom保护路由在刷新页面期间始终重定向到登录_Reactjs_React Router V4

Reactjs React路由器Dom保护路由在刷新页面期间始终重定向到登录

reactjs

Reactjs React路由器Dom保护路由在刷新页面期间始终重定向到登录,reactjs,react-router-v4,Reactjs,React Router V4,我正在构建一个完整的堆栈react应用程序。我实现了React路由器v4保护路由。一切进展顺利，但问题是，在用户登录刷新链接后，它会重定向到登录页面下面是auth.js代码：它用于在登录和注销期间检查身份验证。这里是ProtectedRoute.js 从“React”导入React；从“react router dom”导入{Route，Redirect，withRouter}；从“/Auth”导入身份验证； const ProtectedRoute=（{component:compon

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

下面是auth.js代码：它用于在登录和注销期间检查身份验证。这里是ProtectedRoute.js

从“React”导入React；
从“react router dom”导入{Route，Redirect，withRouter}；
从“/Auth”导入身份验证；
const ProtectedRoute=（{component:component，…rest}）=>{
返回(
{
如果（Auth.isAuthenticated（））{
返回；
}否则{
返回(
);
}
}}
/>
);
};
使用路由器导出默认值（ProtectedRoute）；

这里是app.js

import React，{Component}来自'React'；
从“react router dom”导入{BrowserRouter，Switch，Route}；
导入“./css/style.css”
导入“./css/font-awesome.css”
导入“./css/jquery ui.css”
导入“/App.css”；
导入“./css/bootstrap.css”
导入“引导”
导入“jquery”
从“./components/Login”导入登录名；
从“./components/Dashboard”导入仪表板
从“./components/Users”导入用户
从“./components/UserProfile”导入用户配置文件；
从“./components/Categories”导入类别
从“./components/ContactUs”导入ContactUs
从“./components/QueryDetails”导入QueryDetails
从“./components/EditProfile”导入EditProfile
从“./components/AdminProfile”导入AdminProfile
从“./components/ChangePassword”导入ChangePassword
从“./components/SaleOrPurchaseList”导入SaleOrPurchaseList
从“./components/ProductDetails”导入ProductDetails
从“./components/ReportList”导入报告列表
从“./components/NotFound”导入NotFound
从“/components/ProtectedRoute”导入ProtectedRoute；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

此.authenticated

默认为

false

，因此在调用

Auth.login

之前，只要

ProtectedRoute

呈现，它就会重定向到登录页面。您需要确保

this.authenticated

在呈现

ProtectedRoute

之前获得正确的值

请注意，在调用

Auth.login

或

Auth.logout

后，您的代码很可能不会触发

ProtectedRoute

的重新加载程序。因此

ProtectedRoute

不会对

此做出反应。已验证的更改。
此。已验证的默认为false
，因此无论何时ProtectedRoute
在调用Auth.login
之前呈现，它都会重定向到登录页面。您需要确保this.authenticated
在呈现ProtectedRoute
之前获得正确的值
请注意，在调用Auth.login
或Auth.logout
后，您的代码很可能不会触发ProtectedRoute
的重新加载程序。因此ProtectedRoute
不会对此更改做出反应。已验证的更改。
您可以使用localStorage来处理验证。
在login函数中，您可以像localStorage.setItem（'isAuth'，authenticated）一样设置auth state的值。在注销功能中localStorage.removietem（'isAuth'）
。根据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”导入React；
从“react router dom”导入{Route，Redirect}；
const privaterote=({
组件：组件，
休息
}) => {
const isAuth=localStorage.getItem（'isLoggedIn'）；
返回(
伊萨斯(
) : (
)
}
/>
);
}
导出默认私有路由；
您可以使用localStorage来处理身份验证。
在login函数中，您可以像localStorage.setItem（'isAuth'，authenticated）一样设置auth state的值。在注销功能中localStorage.removietem（'isAuth'）
。根据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”导入React；
从“react router dom”导入{Route，Redirect}；
const privaterote=({
组件：组件，
休息
}) => {
const isAuth=localStorage.getItem（'isLoggedIn'）；
返回(
伊萨斯(
) : (
)
}
/>
);
}
导出默认私有路由；
您可以使用localStorage
保存身份验证的状态，localStorage.setItem（'isLoggedIn'，this.state.authenticated）
。在localStorage中，即使在新的窗口选项卡中，它也会被维护，您必须在注销时手动将其删除。就像在login
函数的值中一样，您可以像下面这样设置auth state的值localStorage.setItem（'isAuth'，this.authenticated）
。在注销函数localStorage.removietem（'isAuth'）
中。好的，我现在正在做这件事，对于Privateroute文件，您可以参考这一点。我认为设置true false值不是一个好方法，最好存储一个变量，并在注销时从localStorage中删除该变量。您可以使用localStorage
保存身份验证的状态，localStorage.setItem（'isLoggedIn'，this.state.authenticated）
。在localStorage中，即使在新的窗口选项卡中，它也会被维护，您必须在注销时手动将其删除。就像在login
函数的值中一样，您可以像下面这样设置auth state的值localStorage.setItem（'isAuth'，this.authenticated）
。在注销函数localStorage.removietem（'isAuth'）中。好的，我现在就这样做，对于Privateroute文件，您可以
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;

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;