Как управлять ролями и правами Laravel 5 и VUE.JS?

Question

[Дмитрий Кузнецов]

Доброго времени суток!
В планах сделать некий новостной сайт с возможностью пользователям добавлять, редактировать и т.п. (что-то типо CMS). Laravel 5.6 - в качестве backend, а Vue.JS - frontend.
Соответственно, хотелось бы разделить пользователей на роли - кому-то можно, а кому-то нельзя что-либо делать. Если с Laravel более-менее понятно, так с vuejs всё плохо. Хотелось бы использовать общие данные, но как лучше реализовать без понятия.
Собственно вопрос: Есть какой-либо пакет/модуль для совмещения всего этого в одну систему? Если есть урок по этому поводу, то буду очень рад если вы этим уроком поделитесь!)
PS: Сейчас понравилась и использую эту библиотеку - Bouncer (Для Laravel 5).
Заранее спасибо.

Comments

[vism]

тоже интересно, ведь данные улетают по апи и если прав нет, желательно чтоб блоки были не доступны и данные о правах нельзя было из под JS посмотреть

[Дмитрий Кузнецов]

vism, меня же больше интересует не backend, а frontend. В API не составит особого труда проверить всё это. А вот на front'e нужно как-то давать или не давать доступ к страницам и функционалу.

Answer 1

[Alex Wells]

Реализуется легко:

на беке юзаете баунсер + $this->authorize/Gate::allows и проверяете нужные права, вне зависимости от фронта.
на фронт с бека передаете берете массив пермишенов (абилитис в баунсере), в том же месте, где передаете юзера (не важно, отдельным запросом или сразу при загрузке страницы). Пишите во vuex'е нужные геттеры, как пример из моего проекта:

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));

И юзаете директивы где нужно, предварительно импортнув нужные геттеры:

v-if="can('chat.mute')"

PS: не стоит писать свои директивы "v-can", ибо:
1) они не информативны (непонятно, что они делают, если прав нет)
2) прийдется написать с десяток таких, на все случаи жизни, типа "can-show", "can-if" и прочая лабудень.

PS2: про "переход по страницам" и любые запросы на бек - ларавель сам кинет forbidden 403, проверяете интерцептором в axios'е на этот статус и кидаете на страницу с ошибкой/показываете окошко/нотификацию/птичку/кошку.

Answer 2

[imhuman]

Все, что хранится на фронте, может быть изменено, это не секрет, поэтому использовать разрешения можно только на уровне показать/скрыть кнопку. Основной контроль должен быть только на бекенде. Поэтому массив разрешений можно загружать вместе с успешной авторизацией, а прятать его смысла нет.

Comments

[Дмитрий Кузнецов]

Я тоже так думаю. Но не могу правильно сконструировать в голове как все эти данные буду получать и сохранять.
Примерно так я думаю:
1. Авторизуем пользователя, а так же через Elequent запросы (или даже лучше через отношения) получаем все разрешённые права в виде json (по идеи не важно как).
Но тут у меня возникает немного другой вопрос, о котором в любом случае придётся разбираться - как составить запрос в отношениях.
2. Далее, как только получили необходимые данные, сохраняем эти данные в vuex (желательно с плагином vuex-persistedstate...просто другой не знаю).
3. Далее уже работаем с дизайном, получая необходимую привилегию и т.п.

Так же нужно учесть, что данные прав и ролей могут измениться. Например, когда администратор изменил права/роль. Т.е. нужно с какой-то периодичностью получать эти данные. А тут уже +1 запрос, хотя это и не так критично.

[Дмитрий Кузнецов]

поэтому использовать разрешения можно только на уровне показать/скрыть кнопку

А, например, как контролировать к определённым страницам сайта (редактировать, удалить и т.п.). Да, функционал такой страницы не сработает, но пользователь то всё равно перейдёт на неё. Как вариант можно сделать так, что бы при переходе на эту страницу мы получали снова наши данные о правах и роли нашего пользователя, а потом уже срабатывал бы редирект или продолжали работу.

Answer 3

[Mokhirjon Naimov]

Мне вот этот вариант понравился (но тока я еще не опробовал): Implementing Laravel’s Authorization on the Front-End

Comments

[Alex Wells]

Не нужно превращать Vue в angular или laravel. Это легкий фреймворк для относительно быстрой разработки, а усложняя все таким образом Вы лишь тратите на это больше времени и сил. Со всем уважением к Вам и этому решению - оно не вписывается в рамки Vue.