React js中主要组件中的身份验证

Question

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

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

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

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

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

    <div className="container">

                {content}

    </div>
);

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

React对我来说是新事物，我可能对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 使用您提供的回调函数的 return 值扩展 props 对象。如果您访问该函数中的反应值（如上面的 Meteor.user()），则只要该值发生变化，就会重新计算它。在浏览器控制台中键入 Meteor.logout()，然后观察组件的即时反应。

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

React js中主要组件中的身份验证

Authentication in main component in react js

javascript

authentication

meteor

reactjs

flow-router