Какой алгоритм получения ролей и прав пользователя на фронт vue или react и как их хранить?

Question

[verygoodboy]

Всем привет. Объясните, пожалуйста, на пальцах, алгоритм получения ролей и прав пользователя на фронте?
Как и когда их получать, где хранить? Нужно ли получать все существующие права и роли из бекенда + роли и права конкретного пользователя? Нужно ли использовать стейт менеджмент для хранения?
Мне не нужен готовый код, просто опишите саму суть процесса.
Спасибо!

Answer 1

[MaxRyazan]

Если у вас на проекте jwt авторизация, то логично роли записывать в токен. Это работает так:
пользователь вводит пароль и логин, на бэке, если все совпадает формируется токен-строка, в которую в payload можно положить роли.
Затем, на фронте написать interceptors, которые будут проверять токен на валидность, и в том числе, парсить роли записывать их в вашу сущность user. (юзера можно хранить в сторе, или просто в js/ts файле в виде реактивного объекта, в случае vue3. У вью мощная реактивность)

В зависимости от текущих ролей пользователя - можно показывать разные элементы на странице, и запретить доступ к некоторым роутам.

Так же, помимо ролей есть система, называемая permissions - пермишны.
Это когда внутри ролей есть еще подкатегории - например, сущность админ может быть нескольких видов - с правом редактирования, удаления, добавления контента, либо же, просто с правом удаления, без права редактирования.

Вот эти доп. условия - удаление, редактирование и тп - это и есть пермишны. Я описал пример. Система может быть разной.

Другой вариант - создать простой роут, скажем getCurrentUser, который будет возвращать текущего пользователя, вместе со всеми ролями. И дёргать роут по мере надобности - скажем, при обновлении access токена.

Comments

[verygoodboy]

Вопрос по варианту 2. Скажите, пожалуйста, помимо getCurrentUser, я так понимаю, необходимо также получать из бека список всех ролей и прав пользователя, чтобы использовать для проверок и сопоставления с правами и ролями полученными у сurrentUser?

[MaxRyazan]

обычно на фронте есть enum с ролями, по которым и идёт сопоставление.

enum IRores  {
 ADMIN = 'admin',
 USER = 'user'
}

<div v-if="currentUser.role === IRoles.ADMIN"></div
   <div :v-role="[IRoles.ADMIN]"></div

простой пример, без какого либо контекста. Оба дива будут отображаться если у текущего пользователя, сохранённого на фронте роль АДМИН.

Во втором случае просто создана кастомная директива для удобства

[verygoodboy]

MaxRyazan, enum с ролями понял, ролей может быть несколько. А как быть с правами, прав может быть очень много на каждую роль и сущность? Их также хранить в enum?

[MaxRyazan]

как всегда есть несколько способов реализации.

В простом случае можно сделать второй енам с пермишнами, если нужно поделить логику работы

enum IRores  {
 ADMIN = 'admin',
 MODERATOR='moderator',
 USER = 'user',
 BLACK_USER='black_user'
}
enum IPermissions{
 WRITE = 'write',
 READ = 'read',
 UPDATE='update'
 DELETE='delete'
 ALL='all'
}

const ROLES_PERMISSIONS = new Map([
[IRoles.Admin, [IPermissions.ALL]],
[IRoles.MODERATOR, [IPermissions.READ, IPermissions.WRITE,  IPermissions.UPDATE],
[IRoles.USER , [IPermissions.READ,  IPermissions.WRITE]],
[IRoles.BLACK_USER, [IPermissions.READ]],
])

const currentUserPermissions = ROLES_PERMISSIONS.get(currentUser.role)

<div v-if="currentUserPermissions.includes(ROLES_PERMISSIONS.DELETE)">some content</div>

Этот вариант является самым простым, и сделан только с целью показать что это вообще такое.
Да, его можно заменить на 1 большой енам, но суть примера - показать именно примитивный вариант.

Если проект сложный и ролей/пермишнов много, создаётся класс, где расписывается конкретная логика работы.

[verygoodboy]

MaxRyazan, Спасибо, теперь мне стало немного яснее как все приблизительно работает на фронте. Нет ли у вас ссылки на мастеркласс или репозиторий из цикла лучших практик, где можно было бы углубиться в изучение вопроса аутинтификации и авторизации пользователя на основе прав и ролей для vue 3, чтобы применить все это на практике?

Answer 2

[Rsa97]

It depends.
Всё зависит от реализации вашей системы. Нужно ли вообще фронту знать о правах пользователя?
Бэк может авторизовать пользователя при каждом запросе, может сохранить права в сессии, может записать их в JWT. В последнем случае права автоматически будут видны фронту.

Comments

[verygoodboy]

Допустим, это некая crm для пользователей с разными ролями и правами для доступа к разным роутам и функциям. Как правильно, именно правильно на сегодняшний день, типа бест практикс, будет реализовать передачу ролей и прав с бека на фронт?