correct-apricot
correct-apricot•12mo ago

Side Menu Hide

I want to hide menus on the sidebar. I am implementing a role-based application, so I want to display menus according to the user's role.
3 Replies
kapa.ai
kapa.ai•12mo ago
Hi @edwinjackson. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can control the visibility of menus on the sidebar based on user roles by using the accessControlProvider in the <Refine /> component. This provider implements an asynchronous method named "can" which is used to control whether the requested access is granted. This method takes resource and action as parameters. Here is an example of how you can implement this: 
<Refine  
 ...
 accessControlProvider={{  
 can: async ({ resource, action }) => {  
 let can: boolean = false;  
 const stringifyUser = localStorage.getItem('refine-user');  
 if (stringifyUser) {  
 const { roles } = JSON.parse(stringifyUser);  
  
 roles.forEach((role: string) => {  
 switch (action) {  
 case 'list':  
 case 'show':  
 can = ac.can(role).read(resource).granted;  
 break;  
 case 'create':  
 can = ac.can(role).create(resource).granted;  
 break;  
 case 'edit':  
 can = ac.can(role).update(resource).granted;  
 break;  
 case 'delete':  
 can = ac.can(role).delete(resource).granted;  
 break;  
 }  
 });  
 }  
 return Promise.resolve({ can });  
 },  
 }}  
/>
<Refine  
 ...
 accessControlProvider={{  
 can: async ({ resource, action }) => {  
 let can: boolean = false;  
 const stringifyUser = localStorage.getItem('refine-user');  
 if (stringifyUser) {  
 const { roles } = JSON.parse(stringifyUser);  
  
 roles.forEach((role: string) => {  
 switch (action) {  
 case 'list':  
 case 'show':  
 can = ac.can(role).read(resource).granted;  
 break;  
 case 'create':  
 can = ac.can(role).create(resource).granted;  
 break;  
 case 'edit':  
 can = ac.can(role).update(resource).granted;  
 break;  
 case 'delete':  
 can = ac.can(role).delete(resource).granted;  
 break;  
 }  
 });  
 }  
 return Promise.resolve({ can });  
 },  
 }}  
/>
In this code, the role of the logged in user is retrieved from local storage. Then, the refine actions are matched with the accessControl's actions and its authorization is checked with the granted method. The returned result is then resolved. For more details, you can refer to this blog post (https://refine.dev/blog/how-to-access-control-with-nestjs/) on how to use AccessControl in refine. Please note that there was a bug (https://github.com/refinedev/refine/issues/4852) reported where inaccessible resources (unauthorized via AccessControlProvider) still show up on the sidebar unless manually hidden through the meta:{hide} property. Make sure you are using the latest version of refine where this issue has been addressed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•12mo ago
<@1150997419916533832> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire
foreign-sapphire•11mo ago