Представления на основе разрешений в AngularJS

Внедрение модуля разрешений на стороне клиента для панели управления CMS Grofers.

Я пишу это, чтобы немного понять, как я реализовал представления на основе разрешений в приложении angularJS и Django.

Проблема

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

Подход

Просто ограничьте контент, к которому пользователь может получить доступ, установив разрешения на различных уровнях. Мы применили необходимые разрешения на трех уровнях.

  1. Уровень URL:
    На уровне URL мы ограничили доступ пользователя к представлению, если ему не разрешено переходить по этому URL.
  2. Уровень элемента:
    На уровне элемента мы можем либо отключить поле ввода, либо скрыть div или span, если пользователь не разрешен.
  3. Уровень API:
    Если какой-либо пользователь обращается к конечной точке API, что запрещено, выдает ошибку на стороне клиента.

Реализация

После завершения аутентификации Django перенаправляет пользователя на домашнюю страницу нашего приложения angular, предоставляя пользователю разрешения в сеансе.

Получение разрешений из сеанса.

Простая директива уровня атрибута для доступа к разрешениям от объекта сеанса.

Отображение разрешений на веб-интерфейсе.

Здесь мы создали глобальную константу, подобную приведенной ниже, для сопоставления разрешений, полученных из бэкэнда, с настраиваемыми именованными разрешениями во внешнем интерфейсе, чтобы упростить определение разрешений на уровне сущности, а также для применения нескольких разрешений с использованием только одной переменной, которая сохраняет код организован и прост для понимания.

Предположим, что если элемент имеет разрешение SELECT-ALL с MERCHANT, это означает, что ему разрешено просматривать это, если у него есть любое из трех разрешений, перечисленных в value. Это помогает, поскольку для доступа к одному и тому же объекту можно использовать несколько разрешений.

Разрешения для URL.

Установите объект данных, соответствующий каждому URL-адресу, чтобы установить разрешение, необходимое для доступа к URL-адресу.

Теперь все, что нам нужно сделать, это проверить перед загрузкой URL-адреса, разрешен ли пользователь, что можно сделать с помощью события $ stateChangeStart.

Разрешения на уровне элемента.

Директива уровня атрибута для отображения / скрытия или отключения / включения элементов.

Проверяет массив разрешений и показывает контент, есть ли у пользователя какие-либо разрешения, необходимые для просмотра этого элемента.

Заключение

Это позволило нам скрыть контент как на уровне URL, так и на уровне DOM. Кроме того, мы можем проверить статус входа в систему, написать собственный код для обработки различных элементов, таких как различные поля ввода, и проверить изменение разрешений, пока пользователь уже работает.

Если вы ищете более подробный ресурс по разработке системы аутентификации на основе разрешений в приложении AngularJS, обязательно ознакомьтесь с этим. ("Ссылка")