Javascript Reactjs中的受保护路由

当我的应用程序初始化并在端口3000上启动时，我面临Reactjs中受保护路由的问题。第一次它没有重定向到登录组件。我还编写了一个逻辑，在没有身份验证的情况下，它首先进入登录组件，然后如果我手动键入path“/user/login”，则登录组件显示

我的布局组件

import React from 'react';
import { connect } from 'react-redux';
import Loadable from 'react-loadable';
import { BreadcrumbsItem } from 'react-breadcrumbs-dynamic';
import { Switch, Route, withRouter } from 'react-router-dom';

import { MAINTENANCE_MODE } from '../../common/constants';

import classes from './Layout.view.scss';
import ProtectedComponent from '../../components/ProtectedComponent';

const Loading = () => 'Loading...';

const Auth = Loadable({
  loader: () => import('../auth/Auth.container'),
  loading: Loading,
});

const Maintenance = Loadable({
  loader: () => import('../../components/Maintenance/Maintenance'),
  loading: Loading,
});

const Dashboard = Loadable({
  loader: () => import('../dashboard/views/dashboard'),
  loading: Loading,
});

const Layout = () => {
  return (
    <>
      <BreadcrumbsItem to="/" key="layout-breadcrumb">
        Home
      </BreadcrumbsItem>
      <div className={classes.layout}>
        <div className={classes.main}>
          <div className={classes.pageContent}>
            {MAINTENANCE_MODE === 'Yes'
              ? <Route path="/" component={Maintenance} />
              : (
                <Switch>
                  <Route
                    exact
                    path="/user/login"
                    component={Auth}
                  />
                  <ProtectedComponent
                    path="/dashboard"
                    component={Dashboard}
                  />
                </Switch>
              )}
          </div>
        </div>
      </div>
    </>
  );
};

Layout.defaultProps = {};

Layout.propTypes = {};

const mapStateToProps = () => ({});

export default withRouter(connect(mapStateToProps)(memo(Layout)));

import React from 'react';
import { get } from 'lodash';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';

import storage from '../common/storage';

const ProtectedComponent = ({ component: Component, isAuthenticated }) => (
  <Route
    render={() => (
      (isAuthenticated || get(storage.get('user'), 'token'))
        ? <Component />
        : <Redirect to="/user/login" />
    )}
  />
);

ProtectedComponent.defaultProps = {
  isAuthenticated: false,
};

ProtectedComponent.propTypes = {
  component: PropTypes.any.isRequired,
  isAuthenticated: PropTypes.bool,
};

export default ProtectedComponent;

从“React”导入React；
从'react redux'导入{connect}；
从“react Loadable”导入Loadable；
从“react breadcrumbs dynamic”导入{BreadcrumbsItem}；
从“react router dom”导入{Switch，Route，withRouter}；
从“../../common/constants”导入{MAINTENANCE_MODE}；
从“/Layout.view.scss”导入类；
从“../../components/ProtectedComponent”导入ProtectedComponent；
常量加载=（）=>“加载…”；
const Auth=可加载({
加载程序：（）=>导入（'../auth/auth.container'），
加载：加载，
});
常量维护=可加载({
加载程序：（）=>导入（'../../components/Maintenance/Maintenance'），
加载：加载，
});
const Dashboard=可加载({
加载程序：（）=>导入（'../dashboard/views/dashboard'），
加载：加载，
});
常量布局=（）=>{
返回(
家
{维护模式==='是'
? 
: (
)}
);
};
Layout.defaultProps={}；
Layout.propTypes={}；
常量mapStateToProps=（）=>（{}）；
使用路由器导出默认值（连接（MapStateTops）（备注（布局））；

我的受保护路由组件

import React from 'react';
import { connect } from 'react-redux';
import Loadable from 'react-loadable';
import { BreadcrumbsItem } from 'react-breadcrumbs-dynamic';
import { Switch, Route, withRouter } from 'react-router-dom';

import { MAINTENANCE_MODE } from '../../common/constants';

import classes from './Layout.view.scss';
import ProtectedComponent from '../../components/ProtectedComponent';

const Loading = () => 'Loading...';

const Auth = Loadable({
  loader: () => import('../auth/Auth.container'),
  loading: Loading,
});

const Maintenance = Loadable({
  loader: () => import('../../components/Maintenance/Maintenance'),
  loading: Loading,
});

const Dashboard = Loadable({
  loader: () => import('../dashboard/views/dashboard'),
  loading: Loading,
});

const Layout = () => {
  return (
    <>
      <BreadcrumbsItem to="/" key="layout-breadcrumb">
        Home
      </BreadcrumbsItem>
      <div className={classes.layout}>
        <div className={classes.main}>
          <div className={classes.pageContent}>
            {MAINTENANCE_MODE === 'Yes'
              ? <Route path="/" component={Maintenance} />
              : (
                <Switch>
                  <Route
                    exact
                    path="/user/login"
                    component={Auth}
                  />
                  <ProtectedComponent
                    path="/dashboard"
                    component={Dashboard}
                  />
                </Switch>
              )}
          </div>
        </div>
      </div>
    </>
  );
};

Layout.defaultProps = {};

Layout.propTypes = {};

const mapStateToProps = () => ({});

export default withRouter(connect(mapStateToProps)(memo(Layout)));

import React from 'react';
import { get } from 'lodash';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';

import storage from '../common/storage';

const ProtectedComponent = ({ component: Component, isAuthenticated }) => (
  <Route
    render={() => (
      (isAuthenticated || get(storage.get('user'), 'token'))
        ? <Component />
        : <Redirect to="/user/login" />
    )}
  />
);

ProtectedComponent.defaultProps = {
  isAuthenticated: false,
};

ProtectedComponent.propTypes = {
  component: PropTypes.any.isRequired,
  isAuthenticated: PropTypes.bool,
};

export default ProtectedComponent;

从“React”导入React；
从“lodash”导入{get}；
从“道具类型”导入道具类型；
从“react router dom”导入{Route，Redirect}；
从“../common/storage”导入存储；
const ProtectedComponent=（{component:component，isAuthenticated}）=>(
(
（isAuthenticated | | get（storage.get（'user'），'token'））
? 
: 
)}
/>
);
ProtectedComponent.defaultProps={
I认证：错误，
};
ProtectedComponent.propTypes={
组件：PropTypes.any.isRequired，
已验证：PropTypes.bool，
};
导出默认保护组件；

键入：您将属性定义为

组件

，但在prop中作为

组件

传递

<ProtectedComponent
   path="/dashboard"
   component={Dashboard}
  />

ProtectedComponent.propTypes = {
  Component: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.array,
  ]).isRequired,
  isAuthenticated: PropTypes.bool,
};

ProtectedComponent.propTypes={
组件：PropTypes.oneOfType([
PropTypes.object，
PropTypes.array，
]).要求，
已验证：PropTypes.bool，
};

键入：您将属性定义为

组件

，但在prop中作为

组件

传递

<ProtectedComponent
   path="/dashboard"
   component={Dashboard}
  />

ProtectedComponent.propTypes = {
  Component: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.array,
  ]).isRequired,
  isAuthenticated: PropTypes.bool,
};

ProtectedComponent.propTypes={
组件：PropTypes.oneOfType([
PropTypes.object，
PropTypes.array，
]).要求，
已验证：PropTypes.bool，
};

从“React”导入React，{Component}；
从“../services/authService”导入身份验证//这里我检查本地存储用户是否登录
进口{
路线,，
重新使用
}从“反应路由器dom”；
类ProtectedRoute扩展组件{
render（）{
const{path，component:component，render，…rest}=this.props
报税表（
{
如果（！auth.getCuurentUser（））返回
返回组件？：渲染（道具）；
}}
/>
);
}
}
导出默认的ProtectedRoute；

App.js我在哪里写我的路线

 <ProtectedRoute path="/contact" component={Contact} />

从“React”导入React，{Component}；
从“../services/authService”导入身份验证//这里我检查本地存储用户是否登录
进口{
路线,，
重新使用
}从“反应路由器dom”；
类ProtectedRoute扩展组件{
render（）{
const{path，component:component，render，…rest}=this.props
报税表（
{
如果（！auth.getCuurentUser（））返回
返回组件？：渲染（道具）；
}}
/>
);
}
}
导出默认的ProtectedRoute；

App.js我在哪里写我的路线

 <ProtectedRoute path="/contact" component={Contact} />

如果我更改，它将显示失败的道具类型：提供给

ProtectedComponent

的无效道具

组件

您不必定义组件，默认情况下，它是为任何组件定义的。如果我更改它，它将显示失败的道具类型：提供给

ProtectedComponent

的无效道具

prop

您不必定义组件，默认情况下，它是为任何组件定义的。