处理多个受保护的路由

Question

我正在尝试保护两个不同的路由，访问该路由的用户必须经过身份验证，我也遵循了这个question，但它对我一点帮助都没有。在我的 Header.js 中，所有逻辑都已在该文件上给出以检查用户是否已登录（使用 redux 操作，reducer）所以我直接给出<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)

在登录时，只需重新渲染组件。