Thank you for reading this tutorial, Ferlito. That’s an interesting use case and it’s currently a topic under research. We are looking to provide some guidance on implementation of handling user roles in the client. However, there are multiple ways to accomplish this.
So far, my preferred approach to what I have researched is to compile all the unique permissions into a set and render UI components based on the presence of a permissions instead of a role. So if a user has three roles, you create a set with all the unique permissions that those roles grant the user. Then, you can check if the user permission set has the required permissions to render the component.
You could manage the permissions checking with a helper service or something like a Vuex store.
It’s important to note that user role handling in the client is purely done for UX purposes and not for security. I highly recommend that you always check with the server when fetching and loading data. That way, if the UI is manipulated to render the “gated” components, those components still need to make a server call to get the required data. If the API request doesn’t have the required permissions, then the server won’t return any data.
I hope this is helpful insight!