Как управлять маршрутизацией для защищенных страниц в приложении React?

Question

Нужно ли проверять аутентификацию в каждом защищенном контейнере страниц и если это ложное перенаправление на страницу входа?что я могу сделать, если у меня много защищенных страниц?

Answer 1

Как сказал @Nisfan, создание HOC - неплохая идея.

Например:

// This HOC redirects to the landing page if user isn't logged in.
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { LANDING } from '../constants/routes';

const ERROR_MESSAGE = 'You need to be logged in to access that page.';

const withAuthentication = (condition, route = LANDING) => (Component) => {
  class WithAuthentication extends React.Component {
    componentDidMount() {
      if (!condition(this.props.userState.loggedIn)) {
        this.props.history.push(route);
        // TODO: show error if you want
      }
    }

    componentWillReceiveProps(nextProps) {
      if (nextProps.userState.loggedIn !== this.props.userState.loggedIn) {
        if (!condition(nextProps.userState.loggedIn)) {
          this.props.history.push(route);
          // TODO: show error if you want
        }
      }
    }

    render() {
      return this.props.userState.loggedIn ? <Component /> : null;
    }
  }

  WithAuthentication.propTypes = {
    history: PropTypes.object.isRequired,
    userState: PropTypes.object,
  };

  const mapStateToProps = state => ({
    userState: state.userState,
  });

  const temp = connect(mapStateToProps)(WithAuthentication);

  return withRouter(temp);
};

export default withAuthentication;

Затем, когда вы хотите защитить маршрут, вы можете обернуть свой компонентв withAuthentication с условием.

Например, ваше условие может заключаться в том, вошел ли пользователь в систему или вошел ли он в систему и является ли он администратором и т. Д.

Answer 2

Вы можете использовать компонент высшего порядка (HOC) для своего маршрутизатора.используйте PrivateRouter hoc.

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
) 

используйте это вместо маршрута.

<PrivateRoute component={component} {...props} />