RBAC (role based access control) how to organize in nuxt js?

Question

JavaScript

I am making a single page app and the task is to make RBAC (role-based access control).
I tried to use this plugin https://github.com/JiriChara/vue-kindergarten , with the help of this plugin in nuxt it was only possible to organize the protection of routes, but using methods in the template itself does not work there, i.e. I cannot hide menu items and etc. depending on the role of the user.
Now I think how to be and what to do, someone met with this problem. Tell me how you can organize everything either yourself or is there a ready-made solution

Answer 1

You upload the rights to the store, make a userCan('permission name') getter there, and that's it. In the template where you need if($store.getters.userCan('buyHerbs')),
with routes it's generally simple there, through the hook router.beforeEach((to, from, next) => {
if(!store.getters.userCan( 'buy Herbs')){
next({name: 'Comrade MajorAccess Denied'})
}