Question

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

＆＃13;

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

＆＃13;

因此，在用户通过身份验证后，我从服务器获取ACLs。如何找到基于这些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>;
 }

如何基于ACL对象呈现反应组件？

1 个答案: