Permission на клиенте. Как реализуют профи?

Question

[Андрей Шулепин]

Здравствуйте. Поделитесь опытом, как организовать доступ к функциям на клиенте(браузере).
Ситуация такова: на бекенде с jwt авторизацией.(состояние авторизованного пользователя не хранится) есть апи которые доступны не каждому пользователю. Как обычно делается с клиентом? То есть например кнопку с ограниченной функцией нужно скрыть/заблокировать или лучше оставить и после нажатия отвечать что функция недоступна. В первом случае, получается надо хранить на клиенте все функции доступные пользователю.
Перечитал, понимаю что описал вопрос некрасиво. Как перефразировать покороче не знаю.

Answer 1

[Антон Антон]

На клиенте рисовать только доступные кнопки, с клиента периодически слать запрос на доступные кнопки + отдельная кнопка для обновления с клиента. Иметь возможность "пропихнуть" кнопки с сервера в дополнение к ответу на запрос. На сервере, естественно, проверять доступность функции.
Если же нам надо продать "недоступные кнопки", то их можно рисовать, но в задизэйбленом состоянии.

Comments

[Андрей Шулепин]

То есть в ответе со списком элементов слать доступность операций со списком, это понял. А что значит общая кнопка на обновление?! То есть как то некрасиво получается как в Mvc. Еще уточнение: обновление с периодичностью как то выглядит слишком нагружено для сервера. То есть клиенты просто открыв форму будут грузить запросами. В любом случае спасибо

Answer 2

[Сергей Кривошеев]

Я не профессионал, но решение для себя такое сделал.

Фронтенд хранит все формы, кнопки и тп. отображение интерфейса производится через проверку прав доступа.

Сервер на laravel, после авторизации возвращает меню + rbac пользователя. Интерфейс отрисовывается в зависимости от разрешений пользователя (permissions). При изменении списка разрешений, например администратором, отправляется обновлённый список ролей пользователю через websocket. Перестраивается интерфейс.

И на сервере всегда проверяю разрешено ли пользователю выполнять данное действие.

Comments

[vism]

код фронта бы посмотреть... хз как делать такое)

[Сергей Кривошеев]

Эту библиотеку использую: https://github.com/websanova/vue-auth

Вот пример для роутов:
https://github.com/websanova/vue-auth/blob/master/...

Вот пример для permissions:
https://github.com/websanova/vue-auth/issues/391

Вот пример как подписываюсь на WebSocket с Laravel

Echo.private('App.User.Permissions.' + this.$auth.user().id)
                            .listen('UserPermissions', (e) => {
                                this.$auth.user().permissions = e.permissions
                                this.$store.dispatch('initMenu')
                            });

А на фронтенде просто проверяю v-if

<v-tooltip top>
                            <v-btn flat icon small
                                   @click="editItem(props.item)"
                                   v-if="$auth.check('projects_edit', 'permissions')"
                                   class="mx-0"
                                   slot="activator"
                            >
                                <v-icon small>
                                    edit
                                </v-icon>
                            </v-btn>
                            <span>Редактировать проект</span>
                        </v-tooltip>