обработка нескольких защищенных маршрутов

Question

Я пытаюсь защитить два разных маршрута, чтобы для доступа к этим маршрутам пользователь должен был пройти аутентификацию. Я также следовал этому вопросу , но он мне совсем не помог. В моем Header.js вся логика была дана для этого файла, чтобы проверить, вошел ли пользователь в систему или нет (с использованием действия приставки, редуктора). Поэтому я даю <Redirect to='/surveys'/> эту ссылку перенаправления, которая будет доступна, когда пользователь вошел в систему. в виде страницы приветствия. И есть другой маршрут /surveys/new всякий раз, когда он идет по этому маршруту, если в каком-то состоянии браузер обновляется, я снова получаю ссылку /surveys, я хочу остаться на этой странице всякий раз, когда пользователь перезагружает браузер. Пожалуйста, проверьте функцию renderLocation() ... Я сыт по горло, пытаясь найти решение. Пожалуйста, помогите мне кто-нибудь

, вот мой файл Header.js

import React, { Component } from 'react';
import { connect } from "react-redux";
import { Link, Redirect} from 'react-router-dom';
import Payments from "./Payments";

class Header extends Component {
    // renderLocation(){
    //     if(window.location.reload(window.location.pathname === '/surveys')){
    //         return <Redirect key='6' to='/surveys' />;
    //     }else if(window.location.reload(window.location.pathname === '/surveys/new')){
    //         return <Redirect key='7' to='/surveys' />;
    //     }else{
    //         return <Redirect key='8' to='/surveys' />;
    //     }

    // }
    renderContent(){
        switch(this.props.auth){
            case null:
                return;
            case false:
                return [
                    <li key="4"><a href="/auth/google" className="btn"><strong>Login With Google</strong></a></li>,
                    <Redirect key="5" to="/" />
                ];
            default:
                return [
                        <li key="1"><Payments /></li>,
                        <li key="2"><button className = "btn ml-3"><strong>CREDITS : {this.props.auth.credits}</strong></button></li>,
                        <li key="3"><a href="/api/logout" className="btn"><strong>Logout</strong></a></li>,
                        // <div>{() => this.renderLocation()}</div>,
                        <Redirect key="8" to='/surveys' />,
                ]
        }   
    }

    render() {
        return (
            <nav style={{marginBottom:"20px"}}>
                <div className="nav-wrapper">
                    <div className="container">
                        <Link to={this.props.auth ? '/surveys' : '/'} 
                            className="left brand-logo" style={{textDecoration : "none", fontFamily: "'Pacifico', cursive"}}> Emaily
                        </Link>
                        <ul id="nav-mobile" className="right">
                            {this.renderContent()} 
                        </ul>

                    </div>
                </div>
            </nav>
        )
    }
}

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

export default connect(mapStateToProps)(Header);

Answer 1

Используйте компонент более высокого порядка

export const withAuth = (Component) => {
    return () => {
        // Check if Authenticated
        const user = checkUserSession() // Handle return user context if authenticated or null if not

        // If Logged in, it will render the Component.
        if (user) {
            return <Component user={user} />;
        } else {
            return <LoginComponent />
        }
    };
};

Теперь, для каких маршрутов вам требуется авторизация, просто экспортируйте соответствующие компоненты, такие как

import withAuth from './withAuth.jsx'

class MyProtectedComponent extends React.Component {
     // ...
}

export default withAuth(MyProtectedComponent)

При входе в систему, просто выполните рендеринг компонента.