Reactjs 中受保护的路由答案

【问题标题】：Protected routes In ReactjsReactjs 中受保护的路由
【发布时间】：2020-04-09 14:26:40
【问题描述】：

当我的应用程序初始化并在端口 3000 上启动时，我面临 Reactjs 中受保护路由的问题。第一次它不会重定向到登录组件。我还编写了逻辑，在没有身份验证的情况下，它首先进入登录组件，然后如果我手动输入路径“/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;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

错字：您将属性定义为Component，但您在属性中传递为component。

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

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

【讨论】：

如果我改变它显示失败的道具类型：无效的道具Component提供给ProtectedComponent
你不必定义一个组件，它默认为任何组件定义。

【解决方案2】：

import React, { Component } from 'react';
import auth from '../services/authService' // here i am checking local storage user is login 
import {
  Route,
  Redirect,
} from "react-router-dom";
class ProtectedRoute extends Component {
  render() { 
    const {path, component: Component, render, ...rest} = this.props
    return (  

      <Route
        path={path} 
        {...rest}
        render={ props => {
          if(!auth.getCuurentUser()) return <Redirect to={{
              pathname: '/login',
              state: {from: props.location}
          }}/>
          return  Component ? <Component {...props}/> : render(props);
        }}
        
        />
    );
  }
}
 
export default ProtectedRoute;

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

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

【讨论】：