How to render react components based on an ACL object?

Question

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.

Basavaraj Sonnad · Accepted Answer · 2017-10-09 06:33:26Z

1

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

answered Oct 9, 2017 at 6:33

Basavaraj Sonnad

2151 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render react components based on an ACL object?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related