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

Метод 1: использование AngularFireAuth
Библиотека AngularFireAuth предоставляет удобный для Angular API для взаимодействия с функциями аутентификации Firebase. Сначала установите библиотеку, выполнив следующую команду:

npm install @angular/fire firebase

Далее импортируйте необходимые модули и внедрите сервис AngularFireAuth в свой компонент:

import { AngularFireAuth } from '@angular/fire/auth';
constructor(private afAuth: AngularFireAuth) { }

Чтобы получить текущего пользователя, вы можете просто вызвать свойство authState:

this.afAuth.authState.subscribe(user => {
  if (user) {
    // User is signed in, handle the logic here
  } else {
    // User is signed out
  }
});

Метод 2. Использование Firebase JavaScript SDK
Если вы предпочитаете использовать Firebase JavaScript SDK напрямую, вы можете инициализировать его в своем приложении Ionic, добавив следующий тег сценария в файл index.html:

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>

В своем компоненте инициализируйте Firebase и получите текущего пользователя:

import firebase from 'firebase/app';
import 'firebase/auth';
const firebaseConfig = {
  // Your Firebase configuration
};
firebase.initializeApp(firebaseConfig);
firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // User is signed in
  } else {
    // User is signed out
  }
});

Метод 3: использование защиты маршрутизатора Angular.
Другой подход — использовать защиту маршрутизатора Angular для проверки статуса аутентификации перед переходом к определенным маршрутам. Создайте защиту аутентификации с помощью следующей команды:

ionic generate guard auth

Реализовать логику защиты в сгенерированном файле:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private afAuth: AngularFireAuth, private router: Router) { }
  canActivate(): Observable<boolean> {
    return this.afAuth.authState.pipe(
      map(user => {
        if (user) {
          return true;  // User is signed in
        } else {
          this.router.navigate(['/login']);
          return false; // User is signed out
        }
      })
    );
  }
}

Чтобы защитить маршрут, добавьте свойство canActivateв конфигурацию маршрутизации:

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  },
  // Other routes
];

Отслеживание текущего пользователя в Firebase с помощью Ionic важно для аутентификации пользователя и персонализированного взаимодействия. В этой статье мы рассмотрели три метода: использование AngularFireAuth, Firebase JavaScript SDK и средств защиты маршрутизатора Angular. Каждый метод предлагает разный уровень гибкости и интеграции с вашим приложением Ionic. Выберите тот, который лучше всего соответствует вашим потребностям, и начните создавать потрясающий пользовательский интерфейс с помощью Firebase и Ionic.