Question

我尝试使用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。而当我尝试致电用户时是不确定的。如何在应用中管理Auth系统的最佳实践是什么？

这是我的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>

如何使用onAuthStateChanged管理我的Ionic FireBase Auth服务

0 个答案: