Question

我在项目中使用React Router。我正在尝试保护未经身份验证的用户的经过身份验证的用户页面。

我的代码如下所示

ReactDOM.render(
    <Router>
        <Switch>
            <Route exact path="/" component={Login} />
            <Route exact path="/register" component={Register} />

            if(Auth.isAuthenticated()) {                
                <Route exact path="/dashboard" component={Dashboard} />
            }
            else {
                <Redirect to="/" />
            }
        </Switch>
    </Router>, 
    document.getElementById('root'));

但是此<Redirect to="/" />无法正常工作。

更新

我制作了另一个如下所示的组件

Authentication.js

import React, { Component } from 'react';
import Auth from '../services/Auth';
import { Redirect} from "react-router-dom";

const memberAreaHOC = WrappedComponent => {
    class Authentication extends Component {
        render() {
            if ( ! Auth.isAuthenticated()) {
                return <Redirect to="/login" />
            }
            return <WrappedComponent {...this.props}/>;
        }
    }
}

export default memberAreaHOC;

Answer 1

有几种方法可以做到这一点，但是我最近做的是创建一个包装函数来扩展受保护的路由。

即：

const memberAreaHOC = WrappedComponent => {
  class MA extends Component {
    render() {
      if ( ! Auth.isAuthenticated()) {
        return <Redirect to="/login" />
      }
      return <WrappedComponent {...this.props}/>;
    }
  }
}

，现在在您的路线定义中：

<Router>
    <Switch>
        <Route exact path="/" component={Login} />
        <Route exact path="/register" component={Register} />

        <Route exact path="/dashboard" component={memberAreaHOC(Dashboard)} />

    </Switch>
</Router>

您可以看到，我用新的Dashboard包装了memberAreaHOC

memberAreaHOC(Dashboard)

Answer 2

您可以尝试吗？

<Switch>
    <Route exact path="/" component={Login} />
    <Route exact path="/register" component={Register} />
    {
        !Auth.isAuthenticated() && <Redirect to="/" />
    }
    <Route exact path="/dashboard" component={Dashboard} />
</Switch>

Answer 3

将requireAuth包装到需要访问权限的那些组件中。路线

<Route path="/admindashboard" component={requireAuth(App)}/>

创建一个高阶组件来对用户进行身份验证。通常，HOC的创建是为了重用该功能，该功能将功能作为输入并以输出形式作为功能。因此，为了对每条路线进行用户身份验证对于componentWillMount，他将在呈现包装的组件之前检查其身份验证，而componentWillUpdate将在更新经过身份验证的用户流中的任何内容之前检查身份验证。 / p>

import React from 'react';
import { connect } from 'react-redux';
import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';

export default function(ComposedComponent) {
  class Authenticate extends React.Component {
    componentWillMount() {
      if (!this.props.isAuthenticated) {
         this.props.history.push('/');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.isAuthenticated) {
        this.props.history.push('/');
      }
    }

    render() {
      return (
        <ComposedComponent {...this.props} />
      );
    }
  }

  Authenticate.propTypes = {
    isAuthenticated: PropTypes.bool.isRequired
  }

  function mapStateToProps(state) {
    return {
      isAuthenticated: state.auth.isAuthenticated
    };
  }

  return withRouter(connect(mapStateToProps, null)(Authenticate));
}

未认证用户的React Router

3 个答案: