Squeak.ru - шаблоны программирования

Как реализовать метод isLoggedIn с помощью Angular Firebase?

Я пытаюсь реализовать метод isLoggedIn с Firebase в моем приложении Angular 6, и у меня возникают проблемы, потому что пользователь firebase является объектом «подписки», и я пытаюсь использовать его как обычный метод isLoggedIn ().

Вот что у меня есть на данный момент:

export class AngularFireAuthService {
    private firebaseUser$: Observable<firebase.User>;

    constructor(private angularFireAuth: AngularFireAuth) {
        this.firebaseUser$ = angularFireAuth.authState;
    }

    getFirebaseUser() {
        return this.firebaseUser$;
    }

    register(user: any) {
        return this.angularFireAuth.auth.createUserWithEmailAndPassword(user.email, user.password)
    }

    login(user: any) {
        return this.angularFireAuth.auth.signInWithEmailAndPassword(user.email, user.password)
    }

    logout() {
        return this.angularFireAuth.auth.signOut();
    }

    resetPassword(email: string) {
        return this.angularFireAuth.auth.sendPasswordResetEmail(email);
    }

    isLoggedIn() {
        //not sure how to do this.

        //I was trying to do something like this:
        // this.firebaseUser$.subscribe((user) => {
        //     if (user) {
        //         return true;
        //     } else {
        //         return false;
        //     }
        // });
    }
}

Есть ли способ реализовать метод isLoggedIn, чтобы я мог просто вызвать его в любом из моих компонентов? Я пробовал погуглить, и похоже, что большинство людей делают это, подписываясь на объект firebaseUser $, и если результат не равен нулю, тогда предположим, что пользователь вошел в систему. Но мне было интересно, могу ли я обойтись без подписаться на каждый из моих компонентов и вместо этого просто вызвать метод isLoggedIn, который просто вернет true или false, например:

if (this.angularFireAugthService.isLoggedIn()) {
   //do something
}

  • Состояние входа пользователя может меняться между рендерами, и вы захотите обновить свой пользовательский интерфейс, когда это произойдет. Это причина, по которой люди используют подписку. Вы, конечно, можете использовать измененное значение, чтобы определить, вошел ли пользователь в систему при вызове вашего цикла рендеринга, но вы пропустите обновления. 23.05.2020
  • Но как мы это делали до того, как у нас появились подписки? Как в Angular 1. Я мог бы вручную управлять своими представлениями, проверив isLoggedIn, не так ли? 24.05.2020
  • В любой версии Angular интеграция построена поверх обработчика onAuthStateChanged Firebase. См. Первый фрагмент здесь: firebase.google.com/docs/ auth / web / 24.05.2020

Ответы:


1

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

Вот пример:

private isAuthenticated: boolean;

public isLoggedIn(): boolean {
     return this.isAuthenticated;
 }

public async login(email: string, password: string): Promise<void> {
    try {
      await this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
      this.isAuthenticated = true;
      ...
    } catch (error) {
      this.isAuthenticated = false;
      ...
    }
  }

public async logOut(): Promise<void> {
    try {
      await this.angularFireAuth.auth.signOut();
      this.isAuthenticated = false;
      ...
    } catch (error) {
       ...
     }
  }

// you subscribe to this in the root component
public initAuthListener(): Observable<User> {
    return this.angularFireAuth.authState.pipe(
      tap(user => {
        if (user) {
          this.isAuthenticated = true;
          // do stuff
        } else {
          this.isAuthenticated = false;
        }
      })
    );
  }

И в любом вашем компоненте, который вы можете использовать:

if (this.angularFireAugthService.isLoggedIn()) {
   //do something
}

Обновить

В app.component.ts вам нужно внедрить службу аутентификации и подписаться на метод initAuthListener в ловушке жизненного цикла OnInit следующим образом:

constructor(private angularFireAugthService: AngularFireAuthService) {}

ngOnInit() {
  this.angularFireAugthService.initAuthListener().subscribe();
}

Теперь аутентификация сохранится, и свойство isAuthenticated из службы аутентификации будет соответствующим образом обновлено.

23.05.2020
  • Не могли бы вы уточнить комментарий, // на который вы подписаны в корневом компоненте? Вы имеете в виду app.component.ts? Не могли бы вы показать пример? Спасибо! 24.05.2020

  • 2

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

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        // User is signed in, see docs for a list of available properties
        // https://firebase.google.com/docs/reference/js/firebase.User
        var uid = user.uid;
       // ...
     } else {
        // User is signed out
        // ...
     }
    });
    
    16.07.2021
    Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...