how to Manage role permission by Vue?

Question

I am developing software with Laravel and Vue. Given that I am developing SPAs and not using .blade files, I am looking for a way to determine access levels in appearance templates. Like "@role" in Laravel. One thing I can manage is whether the user has access to a button or an element on the page.

Is there a solution to this by vue?

thanks

Answer 1

You can use vue router, and create a middleware role-based.

https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/

With this in mind you can then create pages which are role-based.

If you want to conditionally show role-based specific UI, you can then create a directive to use on your tags.

https://v2.vuejs.org/v2/guide/custom-directive.html

So, for example you can create a v-role="admin" directive which will show the button only to someone who has admin role.

<button v-role="admin"/>