在Firebase中创建用户并同时在Angular中将其数据保存在Firestore中

时间:2019-01-28 04:35:48

标签: javascript angular firebase google-cloud-firestore

我正在Angular 6中创建一个Web应用程序,用户可以在其中创建一个帐户。在表单中,他们会提供其姓名,性别,出生等。。。我想在创建新帐户时将此数据保存到Firestore。

现在,帐户已正确创建,但是数据尚未保存在Firestore中。

我尝试将函数设置为async,并将将数据添加到Firestore的调用设置为await,但没有成功。我以为将数据保存到Firestore的行被忽略了。

我的用户模型:

export interface User {
  firstName: string;
  secondName: string;
  firstSurname: string;
  secondSurname: string;
  emailAddress: string;
}

填写表格后,单击“提交”:

  onFormSubmit() {
    const password = this.personalInformation.get('password').value;

    const user: User = {
      firstName: this.personalInformation.get('firstName').value,
      secondName: this.personalInformation.get('secondName').value,
      firstSurname: this.personalInformation.get('firstSurname').value,
      secondSurname: this.personalInformation.get('secondSurname').value,
      emailAddress: this.personalInformation.get('emailAddress').value
    };

    this.authService.register(user, password)
      .then(res => {
      }, err => {
        console.log(err);
      });
  }

用于创建用户并将数据添加到Firestore的方法:

  register(user: User, password: string) {

    return new Promise<any>((resolve, reject) => {
      this.afAuth.auth.createUserWithEmailAndPassword(user.emailAddress, password)
        .then(res => {

          Object.assign(user, {
            'dateOfCreationAccount': new Date(res.user.metadata.creationTime),
            'lastSignInTime': new Date(res.user.metadata.lastSignInTime)
          });

          // Add user to firestore
          this.firestoreService.addUser(res.user.uid, user);

          // Send verification email
          this.sendVerificationEmail();

          // Logout user
          this.logout();

          resolve(res);

        }, err => reject(err));
    });
  }

async / await相同的方法:

  register(user: User, password: string) {

    return new Promise<any>((resolve, reject) => {
      this.afAuth.auth.createUserWithEmailAndPassword(user.emailAddress, password)
        .then(async res => {

          Object.assign(user, {
            'dateOfCreationAccount': new Date(res.user.metadata.creationTime),
            'lastSignInTime': new Date(res.user.metadata.lastSignInTime)
          });

          // Add user to firestore
          await this.firestoreService.addUser(res.user.uid, user);

          // Send verification email
          this.sendVerificationEmail();

          // Logout user
          this.logout();

          resolve(res);

        }, err => reject(err));
    });
  }

将数据添加到Firestore的方法:

  addUser(uid: string, data: User) {
    this.usersCollection.doc(uid).set(data);
  }

似乎this.firestoreService.addUser行被忽略了。这个想法是在创建帐户后立即将用户的数据保存到Firestore。

1 个答案:

答案 0 :(得分:0)

尝试更改此内容:

  async addUser(uid: string, data: User) {
    await this.usersCollection.doc(uid).set(data);
  }

对此:

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow? = TestWindow()
    // ....
}

...

class TestWindow:UIWindow {
    override func sendEvent(_ event: UIEvent) {

        print(event)

        //<UITouchesEvent: 0x6000008b1f80> timestamp: 366545 touches: {(
        //    <UITouch: 0x7fa056d37dc0> phase: Ended tap count: 1 force: 0.000 
        //window: <zollundpost.TestWindow: 0x7fa056c020a0; baseClass = UIWindow; 
        //frame = (0 0; 375 812); gestureRecognizers = <NSArray: 0x6000034f9530>; 
        //layer = <UIWindowLayer: 0x600003abd940>> view: <UITableViewCellContentView: 
        //0x7fa059a55090; frame = (0 0; 375 72); opaque = NO; gestureRecognizers = 
        //<NSArray: 0x6000034293e0>; layer = <CALayer: 0x600003ac8320>> location in 
        //window: {165, 358.33332824707031} previous location in window: 
        //{144.33332824707031, 358.66665649414062} location in view: {165, 
        //44.999992370605469} previous location in view: {144.33332824707031, 
        //45.333320617675781}
        //    )}

        super.sendEvent(event)
    }
}

编辑1 进一步说明-如果您有一些 Promise ,并希望在解决之后从中获得价值,则可以使用 await 关键字,但是要使用它,您必须添加对方法/函数进行异步修饰符,无论您在何处使用它,都应在方法/函数执行之前添加等待。可以跳过此 await ,IDE可能会警告您,但是要确保它会等待特定操作执行,您应该添加 await