How to manage roles and rights in Laravel 5 and VUE.JS?

Question

Laravel

Good day!
The plans are to make a news site with the ability for users to add, edit, etc. (something like CMS). Laravel 5.6 as backend and Vue.JS as frontend.
Accordingly, I would like to divide users into roles - someone can, but someone cannot do anything. If Laravel is more or less clear, then everything is bad with vuejs. I would like to use common data, but how best to implement without a clue.
Actually the question is: Is there any package / module for combining all this into one system? If there is a lesson about this, I will be very glad if you share this lesson!)
PS: Now I liked it and use this library - Bouncer (For Laravel 5).
Thanks in advance.

Answer 1

It is easy to implement:
on the back, use the bouncer + $this->authorize/Gate::allows and check the necessary rights, regardless of the front.
you send to the front from the back, take an array of permissions (ability in the bouncer), in the same place where you transfer the user (it doesn’t matter, with a separate request or immediately when the page loads). Write the necessary getters in vuex, as an example from my project:

export const can = (state) => (perm) => this.loggedIn(state) && state.authUser.abilities.includes(perm);
export const canAny = (state) => (perms) => perms.some(x => this.can(state)(x));

And use the directives where necessary, having previously imported the necessary getters: PS: you should not write your own "v-can" directives, because: 1) they are not informative (it is not clear what they do if there are no rights) 2) you will have to write about a dozen of them, for all occasions, such as "can-show", "can-if" and other crap. PS2: about "going through the pages" and any requests for back - Laravel itself will throw forbidden 403, check the interceptor in axios for this status and throw it on the page with an error / show a window / notification / bird / cat.

Answer 2

I liked this option (but I haven't tried it yet): Implementing Laravel's Authorization on the Front-End