Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »

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

Вариант использования казался достаточно распространенным. Я начал искать в Интернете решение, использующее Angular 2+ и Ngrx. Увы, я изо всех сил пытался найти чистое решение и продолжал пытаться накатить собственное. Оказалось, что реализовать это просто глупо, и я хотел поделиться этим с сетями.

Это решение использует версии зависимостей:

  • Угловой 5.2.0
  • Ngrx ≥ 5.0.0
  • Rxjs 5.5.6

Демо

Для тех из вас, кто хочет сразу перейти к коду, вы можете проверить полный репозиторий Github. В этом пошаговом руководстве предполагается, что вы имеете базовое представление о ngrx для управления состоянием. Тем, кто не знаком с ngrx и создает приложения на angular, обязательно стоит заглянуть здесь. В любом случае ... вернемся к нашей регулярной программе.

Решение

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

Давайте сосредоточимся на наших файлах управления состоянием.

Сначала мы определяем действия нашего приложения. Для этой демонстрации у нас есть три простых действия: LogIn, LogOut и ExtendLogoutTimer. Теперь посмотрим на наши редукторы.

Редукторы содержат наше начальное состояние и обработчики для действий нашего приложения. Наше состояние отслеживает только одну переменную, isLoggedIn, и это значение инициализируется значением false. Редуктор LOG_OUT устанавливает для isLoggedIn значение false, а LOG_IN устанавливает его в значение true. Мы не обрабатываем тип действия ExtendLogoutTimer явно. Скорее это неявно обрабатывается в модуле эффектов.

Вот где происходит волшебство. У нас есть один побочный эффект, называемый extendApplicationTimeout. Этот эффект вызывается для ВСЕХ типов событий. Он создает наблюдаемый таймер, который срабатывает через 5000 миллисекунд, наш предопределенный период «тайм-аута». По истечении этого времени мы возвращаем новое действие типа logout.

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

Заключение

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

Если у вас есть какие-либо вопросы, напишите нам в комментариях. Я не рассматривал код на основе компонентов в учебнике, но вы можете найти реализацию, указанную во введении выше. Я надеюсь, что это было полезно!