1

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

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

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

假设我有一个主要布局组件：

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

    <div className="container">

                {content}

    </div>
);

如何在此布局中进行身份验证？虽然，我知道我可以在路由器中做到这一点，但流路由器的全部意义在于非反应性和可预测性。Flow router 的作者也建议在模板层上做，就像他在上面的例子中所做的那样。

React 对我来说是新事物，我可能误解了 React 的概念。因此，如果你们认为这不是理想的方式，请引导我走向正确的道路。

4

1 回答 1

0

要将 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>;
});

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

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

于 2016-04-17T20:03:00.290 回答