根据 Firebase 数据库中可用的用户更改路线

Question

我正在使用 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;
        }
      })

    })
  }
}

感谢任何帮助。谢谢

Answer 1

我不确定这是否是一个完整的专业解决方案，但在这里。 在这里使用本地存储。

逻辑

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

当用户点击登录时，我们获取数据并检查数据是否存在于 User 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")});
  }

}