根据firebase数据库中可用的用户更改路由

时间:2017-07-13 06:39:15

标签: angular firebase firebase-realtime-database firebase-authentication angularfire2

我正在使用signInWithGoogle登录,同时检查用户是否已存在于数据库中。如果没有,则将用户信息添加到数据库中。

现在,我想要导航到新用户的survey页面和现有用户的profile页面。对于新用户,用户信息将添加到数据库,但也会导航到profile页面。我希望新用户导航到survey页面。

import { Component } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { Router } from '@angular/router';

export class LoginComponent {

  users: FirebaseListObservable<User[]>;

  constructor(
  private db: AngularFireDatabase,
  public afAuth: AngularFireAuth,
  private router: Router
  ) {
      this.users = this.db.list('/users') as FirebaseListObservable<User[]>;
    }

    signInWithGoogle() {
      this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
        .then((data) => {
          // Checking if the email exists in the database
          this.users.subscribe(users => {

            let exists = users.some(function(el) {
              return el.email === data.user.email;
            });

          // If email does not exists in the database i.e. New user
          if(!exists) {
            this.router.navigate(['/survey']);
            this.users.push({
              email: data.user.email
          })
          return false;
        }
        else {
          // If user already exists
          this.router.navigate(['/profile']);
          return false;
        }
      })

    })
  }
}

感谢任何帮助。感谢

1 个答案:

答案 0 :(得分:0)

我不确定它是否是一个完整的proff解决方案,但现在是。 在这里使用本地存储。

<强> LOGIC

当我们登录时,如果不是我们显示正常的signIn组件,我们检查数据是否存在。

当用户点击SignIn时,我们获取数据并检查数据是否存在于User Observable中,如果不是我们重定向到Survey组件,在重定向之前我们将其作为电子邮件保存到浏览器localstorage,然后执行您调查的内容事情就在那里,然后就是当组件被销毁时,数据被添加到observable中,再次调用解析并将他重定向到配置文件页面。无需重定向。

我不确定,但这似乎是一项体面的工作,在填写调查之前,他无法进入个人资料页面,这也是一个额外的优势。

组件和标记

<button (click)="signInWithGoogle()">Sign in </button>

export class TestComponent implements OnInit {
  constructor(public afAuth: AngularFireAuth) { }
  ngOnInit() {

  }
  signInWithGoogle() {
    this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  }

路由器解析。

import {Injectable} from "@angular/core";
import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router";
import {Observable} from "rxjs";
import * as firebase from "firebase/app";
import {FirebaseListObservable} from "angularfire2/database/firebase_list_observable";
import {AngularFireDatabase} from "angularfire2/database/database";
import {AngularFireAuth} from "angularfire2/auth/auth";
import User = firebase.User;


@Injectable()
export class TestResolve implements Resolve<any> {

  users: FirebaseListObservable<User[]>;

  constructor(public afAuth: AngularFireAuth, private db: AngularFireDatabase, private router: Router , private localStorage : localStorage) {
    this.users = this.db.list('/users') as FirebaseListObservable<User[]>;
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
    this.afAuth.authState.subscribe((data) => {
      if(data){
      this.users.subscribe(users => {
        let exists = users.some(function (el) {
          return el.email === data.email;
        });
        //If email does not exists in the database i.e. New user
        if (!exists) {
          this.localStorage.setItem("email",data.email);  
          this.router.navigate(['/survey']);
        }
        else {
          // If user already exists
          this.router.navigate(['/profile']);
        }
      });
      }
    });
  }

}

现在位于调查组件

export class SurveyComponent implementsOnDestroy{
  constructor(private db: AngularFireDatabase , private localStorage : localStorage) { }
  ngOnDestroy(){

    this.db.list("/users").push({"email": this.localStorage.getItem("email")});
  }

}