Side Menu Hide

worthy-rose · 2023-10-17T17:48:54.509Z

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.

K

kapa.ai•10/17/23, 5:48 PM

Hi @edwinjackson. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•10/17/23, 5:49 PM

----------------------
In refine, you can control the visibility of menus on the sidebar based on user roles by using the

accessControlProvider

accessControlProvider

in the

<Refine />

<Refine />

<Refine />

<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

resource

and

action

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 });  
 },  
 }}  
/>

<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

actions

actions

actions are matched with the accessControl's actions and its authorization is checked with the

granted

granted

granted

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.

K

kapa.ai•10/17/23, 5:49 PM

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}

meta:{hide}

meta:{hide}

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

----------------------

K

kapa.ai•10/17/23, 5:49 PM

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

C

colourful-plum•10/19/23, 9:38 AM

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

Access Control Provider | refine

Overview