javascript - 如何基于 ACL 对象渲染 React 组件？

Question

我有一个用户ACl(访问控制列表)的对象，如下所示:

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

因此，在用户经过身份验证后，我从服务器获取 ACL。 我怎样才能找到一个解决方案来渲染基于这些ACls的所有组件。例如，如果用户无权编辑帖子，则不应呈现 EditButtom 组件。

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

Answer 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>;
 }