Question

我想使用meteor（v1.3）创建基于用户的应用程序。因此，身份验证和授权是应用程序的核心。我遇到了流程路由器作者写的这个优秀的例子，它解释了如何使用流路由器进行身份验证和授权。

https://github.com/alanning/meteor-roles/tree/master/examples/flow-router-advanced 但是这个例子是使用Blaze进行演示。我想知道是否有可能做出同样的反应。

对于我来说，将其转换为反应最困难的部分是，它使用模板级别来进行站点范围的身份验证。在这一点上，我不知道如何做出反应。

假设我有一个Main布局组件：

export const MainLayout = ({content}) => (

    <div className="container">

                {content}

    </div>
);

如何在此布局中进行身份验证？虽然，我知道我可以在路由器中完成它，但流量路由器的整个点是非反应性和可预测的。 Flow路由器作者还建议在模板层上执行此操作，就像他在上面的示例中所做的那样。

React对我来说是新事物，我可能会被误解为反应的概念。因此，如果您认为这不是理想的方法，请引导我走正确的道路。

Answer 1

要将Meteor的反应变量绑定到Meteor 1.3+中的React组件，请使用createContainer函数：

export const MainLayout = createContainer(() => {
  return {
    isAdmin: Roles.userIsInRole(Meteor.userId(), ['admin']),
    userName: Meteor.user() ? Meteor.user().username : null
  }
}, (props) => {
  if (!props.isAdmin) {
    return <p>No cake for you.</p>
  }
  return <div className="container">
    <p>Hello {props.userName}</p>
    {props.content}
  </div>;
});

createContainer使用您提供的回调函数的返回值扩展props对象。如果您访问该函数中的反应值（如上面的Meteor.user()），则只要该值发生变化，就会重新评估该值。在浏览器控制台中输入Meteor.logout()，然后观察组件立即做出反应。

要获得完整的教程，请查看https://www.meteor.com/tutorials/react/collections。

反应中的主要组件中的身份验证

1 个答案: