Как я могу управлять моей службой аутентификации Ionic FireBase с помощью onAuthStateChanged - PullRequest
Новая
       34

Как я могу управлять моей службой аутентификации Ionic FireBase с помощью onAuthStateChanged

0 голосов
/ 29 октября 2018

Я пытаюсь реализовать надежный сервис авторизации с Ionic 3 и средами Firebase, проблема в следующем: У меня есть этот сервис, который проверяет, подключен ли пользователь 

@Injectable()
export class LoginProvider {
  public loginState: boolean = false;
  public user: any;

  private navCtrl: NavController;
  constructor(public loadingProvider: LoadingProvider, public alertProvider: AlertProvider, public zone: NgZone, public googleplus: GooglePlus, authProvider: AuthProvider,
    public platform: Platform, public afAuth: AngularFireAuth, public http: Http, public toastCtrl: ToastController, public facebook: Facebook, public alert: AlertController) {
    console.log("Initializing Login Provider");


    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.zone.run(() => {
          this.user=user;
        });
      }
    });

Теперь у меня есть 2 дополнительных боковых меню, которые отображаются в зависимости от того, какой пользователь вошел и, конечно, объявлен в app.component.ts. эту информацию я получаю из переменной this.user в службе регистрации. Более того, имя пользователя должно отображаться в строке меню. Проблема в том, что onAuthStateChanged () возвращает Observable, как я знаю. и когда я пытаюсь позвонить, пользователь не определен. Как лучше всего управлять моей системой аутентификации в моем приложении.

это мой app.component.html: 

<ion-menu side="right" [content]="content">
    <ion-header text-center padding-vertical>
<img *ngIf="currentUser" src={{currentUser.photoURL}} margin-top>
<h3 *ngIf="currentUser">Welcome  {{currentUser.displayName}}  </h3>

<h3 *ngIf="!currentUser">You are not connected </h3>\
<!-- {{userAccount}} -->
    </ion-header>
    <ion-content padding *ngIf="userAccount">
        <ion-list *ngIf="userAccount.dealer!=true">
            <ion-item menuClose *ngFor="let p of client_pages; let i = index" [ngClass]="{'active_item':activeitem==i}"
                (click)="openPage(p);activeItem(i)" no-lines no-padding>
                <ion-icon name="{{p.icon}}" item-start></ion-icon>
                {{p.title}}
            </ion-item>
        </ion-list>
    </ion-content>
        <ion-content padding *ngIf="userAccount">
            <ion-list *ngIf="userAccount.dealer">
                <ion-item menuClose *ngFor="let p of dealer_pages; let i = index" [ngClass]="{'active_item':activeitem==i}"
                    (click)="openPage(p);activeItem(i)" no-lines no-padding>
                    <ion-icon name="{{p.icon}}" item-start></ion-icon>
                    {{p.title}}
                </ion-item>
            </ion-list>
        </ion-content>
    <ion-footer>
<ion-item *ngIf="currentUser" (click)="logout()" menuClose no-lines>
            <ion-icon name="log-out" item-start></ion-icon>
            Log-Out
        </ion-item>
    </ion-footer>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav  [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
...