Javascript 对登录用户和来宾用户的单独路由作出反应

React路由器组件的官方github页面提到如下内容：

例如，您可以为匿名用户和登录用户返回一组不同的允许位置

这正是我想要实现的，但我实际上找不到任何地方的教程如何做到这一点

---

所以基本上我想为登录用户和来宾用户提供单独的路由器。来宾路由器默认为登录页面，并可能重定向到登录错误页面或关于页面。当用户成功登录后，登录路由器将控制并默认进入系统概览页面。登录的路由还应将导航面板呈现到每个页面。

您可以做的是将路由包装到所谓的组合组件中。它将检查您的用户是否已通过身份验证，如果他/她未通过身份验证，则会将他们退回到您选择的任何路径

这里是一个组合组件的示例，然后我将向您展示如何在routes文件中使用它

import React, {Component} from 'react';
import {connect} from 'react-redux';

export default function(ComposedComponent) { //This code right here serves as the base for any high order component 

    class Authentication extends Component {

        static contextTypes = { //static creates a class level object that will give any other method in this component access to Authentication.contextTypes
            router: React.PropTypes.object //This lets react know ahead of time we will use the router and it defines its type as object
        }

        componentWillMount() {
            if (!this.props.authenticated) {
                this.context.router.push('/signup');
            }

        }

        componentWillUpdate(nextProps) {
         //this lifecycle method runs when the component is about to update with new props, nextProps are those new properties for the rerender
            if (!nextProps.authenticated) {
                this.context.router.push('/signup');
            }
        }

        //{...this.props} makes sure the new combined component Enhanced Component will have all the props of the original component passed into this function/Authentication class
        //it maintains those props even though it's combining two components together to form a Enhanced Component
        render() {

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

    }

    function mapStateToProps(state) {
        return { authenticated: state.user.authenticated };
    }

    return connect(mapStateToProps)(Authentication);
}

import React，{Component}来自'React'；
从'react redux'导入{connect}；
导出默认函数（ComposedComponent）{//这里的代码是任何高阶组件的基础
类身份验证扩展了组件{
static contextTypes={//static创建一个类级对象，该对象将授予此组件中的任何其他方法对Authentication.contextTypes的访问权限
路由器：React.PropTypes.object//这让React提前知道我们将使用路由器，它将其类型定义为object
}
组件willmount（）{
如果（！this.props.authenticated）{
this.context.router.push（'/signup'）；
}
}
组件将更新（下一步）{
//此生命周期方法在组件即将使用新道具更新时运行，下一步是重新渲染器的新属性
如果（！nextrops.authenticated）{
this.context.router.push（'/signup'）；
}
}
//{…this.props}确保新的组合组件增强组件将原始组件的所有props传递到此函数/身份验证类中
//它维护这些道具，即使它将两个组件组合在一起以形成增强组件
render（）{
返回(
);
}
}
函数MapStateTops（状态）{
返回{authenticated:state.user.authenticated}；
}
返回连接（MapStateTops）（身份验证）；
}

我已将上面的身份验证组件作为RequireAuth导入路由文件。它将检查用户是否在我的redux状态下经过身份验证。如果用户未通过身份验证，则该用户将返回到我的“/signup”路由。您可以看到在身份验证的生命周期方法中发生的情况。基本上，如果我使用RequireAuth包装路由中的任何组件，这些组件将继承其生命周期方法。您可以使用它进行更多操作，而不仅仅是检查他们是否登录。您可以让某些用户具有管理员访问权限等。您只需在生命周期方法中检查用户的资格，并将路由推到您想要的任何位置

export default (
    <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="inventory" component={RequireAuth(Inventory)} />
        <Route path="signup" component={Signup} />
        <Route path="single-product/:id" component={RequireAuth(Product)} />
        <Route path="examples" component={Examples} />
        <Route path="pricing" component={Pricing} />
        <Route path="profile" component={RequireAuth(Profile)} />
        <Route path="allProducts" component={RequireAuth(AllProducts)} />
        <Route path="reporting" component={RequireAuth(ReportingContainer)} />
        <Route path="signout" component={Signout} />

    </Route>
);

导出默认值(
);

您可以做的是将路由包装在所谓的组合组件中。它将检查您的用户是否已通过身份验证，如果他/她未通过身份验证，则会将他们退回到您选择的任何路径

这里是一个组合组件的示例，然后我将向您展示如何在routes文件中使用它

import React, {Component} from 'react';
import {connect} from 'react-redux';

export default function(ComposedComponent) { //This code right here serves as the base for any high order component 

    class Authentication extends Component {

        static contextTypes = { //static creates a class level object that will give any other method in this component access to Authentication.contextTypes
            router: React.PropTypes.object //This lets react know ahead of time we will use the router and it defines its type as object
        }

        componentWillMount() {
            if (!this.props.authenticated) {
                this.context.router.push('/signup');
            }

        }

        componentWillUpdate(nextProps) {
         //this lifecycle method runs when the component is about to update with new props, nextProps are those new properties for the rerender
            if (!nextProps.authenticated) {
                this.context.router.push('/signup');
            }
        }

        //{...this.props} makes sure the new combined component Enhanced Component will have all the props of the original component passed into this function/Authentication class
        //it maintains those props even though it's combining two components together to form a Enhanced Component
        render() {

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

    }

    function mapStateToProps(state) {
        return { authenticated: state.user.authenticated };
    }

    return connect(mapStateToProps)(Authentication);
}

import React，{Component}来自'React'；
从'react redux'导入{connect}；
导出默认函数（ComposedComponent）{//这里的代码是任何高阶组件的基础
类身份验证扩展了组件{
static contextTypes={//static创建一个类级对象，该对象将授予此组件中的任何其他方法对Authentication.contextTypes的访问权限
路由器：React.PropTypes.object//这让React提前知道我们将使用路由器，它将其类型定义为object
}
组件willmount（）{
如果（！this.props.authenticated）{
this.context.router.push（'/signup'）；
}
}
组件将更新（下一步）{
//此生命周期方法在组件即将使用新道具更新时运行，下一步是重新渲染器的新属性
如果（！nextrops.authenticated）{
this.context.router.push（'/signup'）；
}
}
//{…this.props}确保新的组合组件增强组件将原始组件的所有props传递到此函数/身份验证类中
//它维护这些道具，即使它将两个组件组合在一起以形成增强组件
render（）{
返回(
);
}
}
函数MapStateTops（状态）{
返回{authenticated:state.user.authenticated}；
}
返回连接（MapStateTops）（身份验证）；
}

我已将上面的身份验证组件作为RequireAuth导入路由文件。它将检查用户是否在我的redux状态下经过身份验证。如果用户未通过身份验证，则该用户将返回到我的“/signup”路由。您可以看到在身份验证的生命周期方法中发生的情况。基本上，如果我使用RequireAuth包装路由中的任何组件，这些组件将继承其生命周期方法。您可以使用它进行更多操作，而不仅仅是检查他们是否登录。您可以让某些用户具有管理员访问权限等。您只需在生命周期方法中检查用户的资格，并将路由推到您想要的任何位置

export default (
    <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="inventory" component={RequireAuth(Inventory)} />
        <Route path="signup" component={Signup} />
        <Route path="single-product/:id" component={RequireAuth(Product)} />
        <Route path="examples" component={Examples} />
        <Route path="pricing" component={Pricing} />
        <Route path="profile" component={RequireAuth(Profile)} />
        <Route path="allProducts" component={RequireAuth(AllProducts)} />
        <Route path="reporting" component={RequireAuth(ReportingContainer)} />
        <Route path="signout" component={Signout} />

    </Route>
);

导出默认值(