Аутентификация Firebase обычно бывает полезна при создании любого типа приложения. Он помогает управлять пользователями вашего приложения, состоянием аутентификации, а также отслеживать сеансы пользователей.
В этой статье мы рассмотрим отслеживание состояния аутентификации в вашем приложении angular и выдачу изменений в другие компоненты с помощью объекта Firebase onAuthStateChanged Observable и объекта RXJS Subject.
давайте погрузимся в …… ..
В signin.component.ts мы получаем данные для входа из формы в нашем шаблоне, которые затем передаем в нашу службу аутентификации для аутентификации.
В нашем auth.service.ts мы импортируем BehaviourSubject и Observable из RXJS. BehavourSubject - это особый тип Observable, который позволяет многоадресно передавать значения множеству Observers. Мы также импортируем AngularFireAuth из Angular Fire и аутентификацию из Firebase / app.
Следующие шаги объясняют этот процесс.
Шаг 1. Инициализируйте свойство currentUser.
Шаг 2. Инициализируйте новый объект BehaviourSubject с именем authStatusSub и передайте currentUser в качестве первого значения.
Шаг 3: Инициализируйте свойство currentAuthStatus, которое возвращает authStatusSub как Obvservable, который можно наблюдать во всех компонентах.
Шаг 4. Создайте метод authStatusListener и используйте onAuthStateChanged для проверки состояния аутентификации. Если пользователь вошел в систему, мы вызываем authStatusSub.next и передаем учетные данные текущего пользователя, однако, если ни один пользователь не вошел в систему, мы передаем null в authStatusSub.next.
authStatusSub.next передает текущее значение всем наблюдателям. См. Https://rxjs-dev.firebaseapp.com/guide/subject для получения дополнительных объяснений.
Давайте приступим к прослушиванию его излучения в другом компоненте.
В header.component.ts мы подписываемся на currentAuthStatus из нашей службы аутентификации и передаем его значение в ранее инициализированное свойство isAuthenticated.
В header.component.html мы используем условные выражения, чтобы проверить, является ли isAuthenticated истинным или ложным, а затем переходим к отображению элементов в соответствии с ними.
Мы смогли успешно отслеживать состояние аутентификации и выдавать новые изменения в нашем статусе аутентификации для различных компонентов. Мы также смогли подписаться, получать передаваемые значения и использовать их в логике нашего приложения.
Кодирование Goodluck….
