React-Redux: лучший способ ограничить доступ пользователей к определенным страницам, если они не вошли в систему

Question

Я новичок в React / Redux и работаю над приложением React. Я изучал базовые c концепции Redux, такие как Store, Actions, Reducers, Middleware и функция connect ().

Однако для некоторых страниц моего приложения я хочу разрешить только пользователи, которые вошли в систему, чтобы иметь доступ к ним, в противном случае они будут перенаправлены обратно на домашнюю страницу приложения.

Мне было интересно, как лучше всего выполнить эту задачу? Я слышал, что для этого можно использовать React Router, но есть ли лучшие способы? Любые идеи приветствуются.

Answer 1

Как вы уже предложили, маршрутизатор, используя его, работает аккуратно и безопасно, если предположить, что пользователь установлен только в состояние избыточности при правильной аутентификации при входе в систему:

import { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom':

const mapStateToProps = (state) => {
    return {
        user: state.user
    }
}

class MyPageWrapper extends Component {

    componentWillMount() {
        if(!this.props.user) this.props.history.push('/login');
    }

    render() {
        return (
            <div>
                <YourPage/>
            </div>
        );
    }
}

export default connect(mapStateToProps)(withRouter(MyPageWrapper));