如何基于 ACL 对象渲染反应组件？答案

【问题标题】：How to render react components based on an ACL object?如何基于 ACL 对象渲染反应组件？
【发布时间】：2017-10-08 08:51:55
【问题描述】：

我有一个用户ACl(Access Control list) 的对象如下：

{
  'api/modelA': ['GET', 'POST'],
  'api/modelB': ['GET'],
  /*...*/
  'api/modelZ' : ['GET']
}

所以在用户通过身份验证后，我会从服务器获取ACLs。如何找到基于这些ACls 渲染所有组件的解决方案。例如，如果用户无权编辑帖子，则不应呈现 EditButtom 组件。

注意：在某些情况下，如果用户无法访问，组件将具有不同的样式，例如灰色。

【问题讨论】：

标签： javascript node.js reactjs redux acl

【解决方案1】：

您可以在组件上使用更高阶的组件（比如 EditButton）。

function HOC(Component) {
   if(ACL(model).indexOf("POST)
   return   <Component style={{display: none}} />;

   return <Component {...this.props}>;
 }

 render(){
   const HocButton = HOC(EditButton); // EditButton  is some button 

   return (<EditButton>Edit</EditButton>;
 }

【讨论】：