continuing-cyan•10mo 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•10mo 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•10mo ago

<@1150997419916533832> kapa.ai is still learning and improving, please let us know how it did by reacting below

xenial-black•10mo ago

Hi @edwinjackson you can use AccessControl https://refine.dev/docs/api-reference/core/providers/accessControl-provider/#sider

Access Control Provider | refine

Overview