我正在try 使用AngularFire创建我在Angular中的第一个应用程序,以帮助Firebase操作,在登录Twitter后,我正在try 将该用户作为文档添加到我的users个Collection 中.

processLoggedUser(): Promise<number> {
    return this.afAuth.getRedirectResult().then(async result => {
        if (result.user) {
            const uid = result.user.uid;
            const credential = result.credential as firebase.default.auth.OAuthCredential;
            console.log('Twitter answer of AuthLogin: ', result)
            this.uid = uid
            let code = 0 // 0 = default code -> error
            if (result.additionalUserInfo.isNewUser) {
                console.log("New user")
                this.user = {
                    uid: this.uid,
                    email: result.user.email,
                    displayName: result.user.displayName,
                    photoURL: result.user.photoURL.replace('_normal', ''),
                    miniPhotoURL: result.user.photoURL,
                    accessToken: credential.accessToken,
                    secret: credential.secret,
                    twitterId: result.additionalUserInfo.profile["id"],
                    username: result.additionalUserInfo.username,
                    bio: result.additionalUserInfo.profile["description"],
                    verified: result.additionalUserInfo.profile["verified"],
                    wallet: 0,
                    staff: false,
                    banned: false,
                    hidden: false
                };
                console.log(this.user)
                await this.afs.collection('users').doc(this.uid).set(this.user || {nome: "oops"}).then(res => {
                    console.log("User created", res)
                    code = 2 // Number code for new user
                }).catch(err => {
                    console.log("Error creating user", err)
                    code = 0 // Number code for error
                })
                return 2
            } else {
                await this.getUser(uid).then(res => res.subscribe(res => {
                    if (res == undefined) {
                        this.signOut()
                        code = 4 // Number code for user not found
                    } else {
                        this.user = res
                        console.log("Existing user", this.user)
                        code = 1 // Number code for existing user
                    }
                }))
            }
            return code
        }else {
            return 3
        }
    }).catch((error) => {
        console.warn(error)
        return 0 // Number code for error
    })
}

真正困扰我的是这一部分:

await this.afs.collection('users').doc(this.uid).set(this.user).then(res => {
    console.log("User created", res)
    code = 2 // Number code for new user
}).catch(err => {
    console.log("Error creating user", err)
    code = 0 // Number code for error
})

它永远不会到达.then()或.catch(),它只是一直在等待响应.但是,如果我把这个完全相同的代码放在构造函数或其他任何地方,它工作得很好,实际上在Firestore数据库中创建了文档.

有人能给我建议一个方法来实现这一点吗?

推荐答案

找到一个,https://github.com/angular/angularfire/issues/2585

基本上,他们告诉你需要订阅".authState"或".user from AngularFireAuth",(注意,authState仅在登录/注销时触发)我会try 以下操作,但我没有办法进行测试,如果有任何问题,请抱歉:

此外,在下面添加了一些关于订阅功能的注释,您可以用我的方式将它们转换为promise.

import { first, tap } from "rxjs/operators";

processLoggedUser(): Promise<number> {
  return this.afAuth
    .getRedirectResult()
    .then(async (result) => {
      if (result.user) {
        const authUser = await this.afAuth.user
          .pipe(
            // Logs
            tap((user) => {
              console.log("User changed: ", user);
            }),
            // to unsibscribe after first event emitted
            first()
          )
          .toPromise(); // toPromise is tricky, a chance it will not fire for you, i have no way to test.

        const uid = result.user.uid;
        const credential = result.credential as firebase.default.auth.OAuthCredential;
        console.log("Twitter answer of AuthLogin: ", result);
        this.uid = uid;
        let code = 0; // 0 = default code -> error
        if (result.additionalUserInfo.isNewUser) {
          console.log("New user");
          this.user = {
            uid: this.uid,
            email: result.user.email,
            displayName: result.user.displayName,
            photoURL: result.user.photoURL.replace("_normal", ""),
            miniPhotoURL: result.user.photoURL,
            accessToken: credential.accessToken,
            secret: credential.secret,
            twitterId: result.additionalUserInfo.profile["id"],
            username: result.additionalUserInfo.username,
            bio: result.additionalUserInfo.profile["description"],
            verified: result.additionalUserInfo.profile["verified"],
            wallet: 0,
            staff: false,
            banned: false,
            hidden: false
          };
          console.log(this.user);
          await this.afs
            .collection("users")
            .doc(this.uid)
            .set(this.user || { nome: "oops" })
            .then((res) => {
              console.log("User created", res);
              code = 2; // Number code for new user
            })
            .catch((err) => {
              console.log("Error creating user", err);
              code = 0; // Number code for error
            });
          return 2;
        } else {
          await this.getUser(uid).then((res) =>
            // Note: subscribe is not a promise, not awaitable, codes will not be set
            res.subscribe((res) => {
              if (res == undefined) {
                this.signOut();
                code = 4; // Number code for user not found
              } else {
                this.user = res;
                console.log("Existing user", this.user);
                code = 1; // Number code for existing user
              }
            })
          );
        }
        return code;
      } else {
        return 3;
      }
    })
    .catch((error) => {
      console.warn(error);
      return 0; // Number code for error
    });
}

Angular相关问答推荐

尾风手风琴中的Ngor

如何在HTMLTITLE属性中使用Angular 显示特殊字符?

有没有其他代码可以用函数的方式写成Angular ?

要素存储更改根存储状态

是否自动处理Angular /RxJS观测数据的取消订阅

区分material 手风琴

Angular,数据显示在控制台但不在应用程序中

如何将我的数组数据转换为逗号分隔的字符串

如何使用 Angular 12 material 验证密码和确认密码?

将数组传递给 URLSearchParams,同时使用 http 调用获取请求

如何使用ngrx和effects 订阅成功回调

Angular2订阅对子组件中@Input的更改

如何在 Angular 4 中使用 Material Design 图标?

如何提高 Angular2 应用程序的加载性能?

在 Angular rxjs 中,我什么时候应该使用 `pipe` 与 `map`

Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name

在 Angular 组件模板中添加脚本标签

Angular 2 输出到router-outlet

如何在 Angular Material 中设置图标的 colored颜色 ?

Angular 9 引入了需要加载的全局$localize()函数