CODEWITHSUNDEEP
javascriptnode.jsreactjsreduxacl
szero
szero

Reputation: 61

How to render react components based on an ACL object?

I have a an object as bellow for user ACl(Access Control list):

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

So after user is authenticated I get the ACLs from server. How can I find a solution for rendering all the components based on these ACls. for instance if user doesn't have access to edit a post the EditButtom component should not be rendered.

Note: for some cases a component will have a different style like gray color if there is no access for the user.

Upvotes: 1

Views: 1898

Answers (1)

Basavaraj Sonnad
Basavaraj Sonnad

Reputation: 215

You can use a higher order component on the component(say 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>;
 }

Upvotes: 1

Related Questions