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
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:
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:
----------------------<@1150997419916533832> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire•11mo ago
Hi @edwinjackson you can use AccessControl https://refine.dev/docs/api-reference/core/providers/accessControl-provider/#sider
Access Control Provider | refine
Overview