Comment rendre le rendu des composants en fonction d'un objet ACL?

Question

J'ai un objet comme ci-dessous pour l'utilisateur ACl(Access Control list):

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

Ainsi, après que l'utilisateur est authentifié je reçois le ACLs du serveur. Comment puis-je trouver une solution pour rendre tous les composants basés sur ces ACls. par exemple, si l'utilisateur n'a pas accès à la modification d'un message, le composant EditButtom ne doit pas être rendu.

Remarque: dans certains cas, un composant aura un style différent comme la couleur grise s'il n'y a pas d'accès pour l'utilisateur.

Answer 1

Vous pouvez utiliser un composant d'ordre supérieur sur le composant (disons 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>; 
}