Аспекты пользовательского маршрутизатора при аутентификации AngularJS

Навигация между различными разделами приложения при реализации аутентификации при входе в систему может стать проблемой при использовании пользовательского интерфейса AngularJS -маршрутизатор. Вот как можно справиться с этим сценарием:

Определение удостоверения пользователя

Создайте службу с именем Principal для управления удостоверением пользователя. Он должен иметь возможность определять, аутентифицирован ли пользователь, получать важную информацию о пользователе (например, отображаемое имя, имя пользователя) и выполнять проверки ролей.

Авторизация

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

Прослушиватель событий Ui-router

Прослушивайте $stateChangeStart событие в ui-router. В рамках этого события используйте службу авторизации, чтобы проверить авторизацию для предполагаемого состояния назначения. Если авторизация не удалась, отмените переход состояния или перенаправьте на соответствующую страницу.

Разрешение личности пользователя

Перед проверкой авторизации необходимо разрешить личность пользователя. Определите родительское состояние в ui-router со свойством разрешения, которое вызывает функцию авторизации службы авторизации. Это гарантирует, что разрешение идентификаторов произойдет до любого изменения состояния.

Условный рендеринг

Используйте основной сервис в представлениях для условного рендеринга элементов или шаблонов на основе статуса аутентификации пользователя или роль. Например, вы можете показывать/скрывать компоненты с помощью таких директив, как ng-show или ng-hide.

Домашняя страница и панель мониторинга

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