RBAC в React, как реализовать, концепция?

Мне нужно реализовать RBAC в приложении React. Я прочитал статью - https://auth0.com/blog/role-based-access-control-rbac-and-react-apps/ - и понял, как это делается, но я не понял, как автоматизировать сбор информации обо всех защищенных действиях для редактирования ролей (добавлять эти разрешения и удалять)?

Я понял: есть какое-то защищенное действие, я завернул его в какой-то HOC и проверил, видит ли его пользователь или нет. Теперь давайте посмотрим на это с другой точки зрения. Мне нужно иметь возможность настраивать роли. Я открываю редактор, создаю имя для роли и хочу добавить некоторые разрешения пользователю. Я должен их откуда-то выбрать, таким образом, список (журнал, таблица - как хотите) всех действий, которые я хочу внедрить RBAC, становится моим центром Вселенной. Чтобы каждый раз, когда мне нужна защищенная кнопка (маршрут), я добавлял ее ID в какой-то список. Это сложное, ненужное действие. Какой механизм я могу использовать, чтобы избежать использования списка действий, описанного выше?

Мои мысли: Для защищенных компонентов я добавляю к их имени постфикс -sec (Component-sec.js). Внутри них я создаю свойства с их именем и описанием. Затем на странице администратора я показываю все разрешения, которые являются компонентами с постфиксами (анализируя их имена, КАК? Я никогда не использовал отражение в JS), и показываю их имена и описания (свойства имени и описания). Речь идет об автоматизации в настройке. Если говорить о разрешении и отклонении задания, то здесь я могу использовать какой-нибудь HOC (AuthComponent), где я могу проверить разрешение.

class MyComponent extends AuthComponent {}
class AuthComponent extends React.component {}

Что вы думаете об этом? Может быть, есть лучшие способы сбора и обработки разрешений?

Важное примечание для читателей: RBAC на стороне React управляют только поведением пользователей в графическом интерфейсе. Они не гарантируют, что все запросы API будут следовать этим RBAC, поэтому уровень API также нуждается в такой же конфигурации.

New Alexandria 08.05.2021 23:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
7 236
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Фронтенд-авторизации недостаточно. Вам также необходима внутренняя авторизация, чтобы злоумышленники не смогли обойти ваш внешний интерфейс. Хорошей практикой является использование одного и того же метода для внешней и внутренней аутентификации. Я рекомендую использовать Касбин, так как он поддерживает внешние языки JS и внутренние языки, такие как Go, Java, Node.js, Python. Таким образом, вам не нужно использовать разные механизмы разрешений для интерфейса и сервера.

Ответ принят как подходящий

Я не уверен, поможет ли это вам напрямую или нет.

Но я реализовал RBAC по-своему. Я контролировал следующие вещи.

  1. Кнопки и действия
  2. Страницы и перенаправления
  3. Модули и защита маршрута.

Я написал блог с полным рабочим примером.

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

Учебник RealMelon - Как создать RBAC (управление доступом на основе ролей) в ReactJS

ваша статья похожа на эту :-- > medium.com/@tarunnagpal78/…

Amir Rezvani 12.08.2020 10:41

Да, оба написаны мной. На самом деле, теперь я начал свой собственный блог и перенес материалы с medium.com на www.realmelon.com.

Tarun Nagpal 13.08.2020 08:55

Спасибо @TarunNagpal за то, что поделились этим. Это хорошо объясненная статья.

kavita 14.03.2021 13:53

Другие вопросы по теме