angularfire2: How to make auth in angularfire2 if

2019-07-22 03:22发布

问题:

I did app with ionic 2 with facebook Login. It works fine. But I mix between angularfire2 and firebase and it's not correct.

this is my code

import { Component,ViewChild } from '@angular/core';
import { Platform,Nav, LoadingController} from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

//import pages
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { SignupPage } from '../pages/signup/signup';
import { TabsPage } from '../pages/tabs/tabs';
import { AboutPage } from '../pages/about/about';
import {StudentsPage} from '../pages/students/students';



//import plugins
import firebase from 'firebase';
//import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
   public rootPage:any;
   //ref firebase
  public semesters:any;
  public userProfile: any;
  //user variables
  public currentUser: any;
  public id_user:any;
  public reg_boolean:any;
  public department:any;
  public year:any;
  public semester:any;
  public semesterdetails:any;

  constructor(platform: Platform, public loadingCtrl: LoadingController) {
    firebase.initializeApp({
    apiKey: "AIzaSyDOpRshkjuy_tGXSzw34RFHXmAFelyAUt0",
    authDomain: "haversami.firebaseapp.com",
    databaseURL: "https://haversami.firebaseio.com",
    storageBucket: "haversami.appspot.com",
    messagingSenderId: "704224601349"
    });

    //get user details
   // this.currentUser = firebase.auth().currentUser;//to uncomment
    this.userProfile = firebase.database().ref('/users');
    this.semesters = firebase.database().ref('/Semesters/sem');

    // this.id_user=this.af.auth.getAuth().uid; // to uncomment
    this.currentUser='1qfcMAQnglX9jsW5GdLpPko1HqE2';

      this.getUserProfile().on('value', (data) => {
      this.userProfile = data.val();
      this.reg_boolean = this.userProfile.reg_boolean;
      this.department=this.userProfile.depName;
      this.year=this.userProfile.year;

      console.log("enter:"+this.department+this.year);
      console.log(this.reg_boolean);
    });

      this.getSemester().on('value', (data) => {
      this.semesterdetails = data.val();
      this.semester = this.semesterdetails.sem_id;   
      console.log(this.semester);
    });

    //check if user connected
     firebase.auth().onAuthStateChanged((user) => {
       var that=this;
      if (user) {
        if(this.reg_boolean=="true"){
          console.log("adirush");  
           this.nav.setRoot(TabsPage,{
           dep:this.department,year:this.year,semester:this.semester

        })
          //this.rootPage=TabsPage;
          this.rootPage=TabsPage;
        }
        else{
        this.rootPage = SignupPage;
        }
        console.log("I'm here! HomePage");
      } else {
        this.rootPage = LoginPage;
        console.log("I'm here! LoginPage");
      }
    });

    let loader = this.loadingCtrl.create();
    loader.present();
    this.listenToUserStatusUpdate(loader);
    let fireBaseUser = firebase.auth().currentUser;
    console.log(fireBaseUser);
   if (fireBaseUser) {
        if(this.reg_boolean=="true"){
          console.log("adirush");  
           this.nav.setRoot(TabsPage,{
           dep:this.department,year:this.year,semester:this.semester

        })
          this.rootPage=TabsPage;
        }
        else{
        this.rootPage = SignupPage;
        }
        console.log("I'm here! HomePage");
      } else {
        this.rootPage = LoginPage;
        console.log("I'm here! LoginPage");
      }

    //this.rootPage = fireBaseUser ? SignupPage : LoginPage;

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
  listenToUserStatusUpdate(loader: any) {
    firebase.auth().onAuthStateChanged((user) => {
      if(loader)
       loader.dismiss();
      console.log("The User:", user);
      if (user) {
          if(this.reg_boolean=="true"){
          console.log("adirush");  
           this.nav.setRoot(TabsPage,{
           dep:this.department,year:this.year,semester:this.semester

        })
          this.rootPage=TabsPage;
        }
        else{
        this.nav.setRoot(SignupPage);
        }
      } else {
        this.nav.setRoot(LoginPage);
      }
    });
  }
   getUserProfile(): any {
    //return this.userProfile.child(this.currentUser.uid); to uncomment
    return this.userProfile.child(this.currentUser); 
  }
  getSemester():any{
    return this.semesters.child("0");
  }


}

As you can see I have duplication parts of code. It works, but not that good. I want it to be in angularfire2.

Some things I want to do:

  1. I want to change the page to work with angularfire2, instead of firebase.
  2. I want auth in Angularfire2 instead of firebase.
  3. if user logged it , it check from firebase if the reg_bool is true. If true it got to tabspage with params, if not to signupage.
  4. if not logged in, it goes to loginPage.
  5. if user already logged it it goes to db and get details year,department,uid;

that's my firebase structure