Как правильно отрисовывать элементы в зависимости от роли?

Question

[Meefril]

Здравствуйте, хотел бы узнать о том как правильно отрисовывать элементы, которые доступны только, например, редактору. Юзер после авторизации получает JWT, в котором есть его роль. Есть личный кабинет и у условного редактора там есть поле в меню, где можно добавлять записи и сейчас я просто делаю v-show этого пункта меню, если юзер является редактором, но сомневаюсь, что это правильный подход... Как правильно решать такого рода задачи?

Answer 1

[Rsa97]

В данном случае правильнее не v-show, а v-if.
Ну и, естественно, проверка на бэкенде.

Comments

[Meefril]

Получается это вполне нормальная практика и не нужно, допустим, для каждой роли свой navbar компонент/свой view делать?

[Rsa97]

Meefril, Если роли отличаются только парой пунктов меню, то логичнее использовать один компонент.
Разделять компоненты есть смысл когда они практически не пересекаются. Иначе потом при добавлении/удалении/изменении общего пункта меню вам придётся переделывать компонент для каждой роли.

[Meefril]

Rsa97, Большое спасибо за ответ!

[Rsa97]

Aleksandr-JS-Developer, Скажем, у вас есть сайт, на главной странице которого в навбаре для админов надо показывать кнопку перехода в админку. Больше никаких отличий. Вы будете делать две главных страницы - для обычных пользователей и для администраторов?

[Rsa97]

Aleksandr-JS-Developer,

Это те самые шаги, которые "хорошо, что те ребята сделали так 5 лет назад"

Либо "вот заразы, сделали пять практически идентичных компонентов, а нам теперь постоянно изменения в каждый вносить".
А так да, надо оценивать предполагаемое развитие проекта.

Учитывая, что это Vue, для меню можно сделать и v-for по фильтрованному списку или по списку разрешённых действий, полученных с бэкенда. В последнем случае вообще получается одно место изменений - конфиг прав. Он сразу определяет и доступные пункты меню, и разрешённые действия на бэке.