时间戳

首页 > 解决方案 > 将文档添加到 firebase auth.createUserWithEmailAndPassword 的 .then 中的集合

javascript - 将文档添加到 firebase auth.createUserWithEmailAndPassword 的 .then 中的集合

问题描述

使用 VueJS 和 Firebase，我想创建一个用户，然后如果成功，则将更多信息添加到用户集合中。

问题是当我进入 .then 时，我的变量 usersCollection 未定义。我知道我可以从 .then 中取出确切的代码并且它可以工作。此外，auth 函数按预期工作。似乎问题在于我正在尝试访问.then 中的集合。但话又说回来，只有当我成功创建一个新用户进行身份验证时，我才需要这样做，以避免从未注册用户那里获得用户信息。我也没有输入 .catch ，也没有在 chrome 控制台中收到任何类型的错误。知道如何让这个逻辑起作用吗？

我用这个初始化了关于firebase的一切：

import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/analytics'

const firebaseConfig = {
  //configs
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();

const db = firebase.firestore();
const auth = firebase.auth();
const usersCollection = db.collection('users');

export {
  db,
  auth,
  usersCollection
}

该代码位于应用程序的主商店中：

import * as types from './types';
import {
  auth,
  usersCollection,
} from '../../../../config/firebase';

//...

[types.ADD]: ({commit}, user) => {
    auth.createUserWithEmailAndPassword(user.email, user.password)
      .then((e) => {
        usersCollection.add(user)
          .then((docRef) => {
            commit(types.MUTATE_ADD, user);
            console.log("Document written with ID: ", docRef.id);
          })
          .catch((error) => {
            console.error("Error adding document: ", error);
          });
      })
      .catch((e) => {
        //...
        alert('An error occured while creating employee.\n' + e.code + '\n' + e.message);
        return false;
      });
  }

上面，创建了我用于身份验证的用户，但是当我到达 .then usersCollection 时未定义，但我在 Chrome 控制台中没有收到错误，并且未创建用户。

如前所述，如果我将用户添加到集合中的块从 .then 我可以将用户添加到集合中：

[types.ADD]: ({commit}, user) => {
    auth.createUserWithEmailAndPassword(user.email, employeeHelper.makePassword(user))
      .then((e) => {

      })
      .catch((e) => {
        var errorCode = e.code;
        var errorMessage = e.message;
        alert('An error occured while creating employee.\n' + e.code + '\n' + e.message);
        return false;
      });
    usersCollection.add(user)
      .catch((error) => {
        console.error("Error adding document: ", error);
      });
  }

标签： javascriptgoogle-cloud-firestorevuejs2firebase-authenticationvuex

解决方案

使用另一种方法使其完全按照我的预期工作：

[types.ADD]: ({commit}, user) => {
    commit(types.MUTATE_ADD, user);
    auth.createUserWithEmailAndPassword(user.email, employeeHelper.makePassword(user))
      .then((e) => {
        usersCollection.doc(user.email).get().then((querySnapshot) => {
          querySnapshot.ref.set(user).then(() => {
            //log success
          })
        }).catch((e) => {
          console.log(e);
          //log error
        })
      })
      .catch((e) => {
        //log error
        return false;
      });
  }

不同之处在于，我没有在 usersCollection 上使用 .add() 方法，而是使用了 .doc(user.email).get().then(...) 并在之后设置数据而不是使用 .add(... ）。出于某种原因，如果我在此处放置断点，Chrome 控制台仍会显示 usersCollection 好像它是未定义的：

usersCollection.doc(user.email).get().then((querySnapshot) => {

但是数据仍然被正确推送到firestore。因此，我不完全接受这样一个事实，即我不知道为什么它会以这种方式工作而不是另一种，但结果正是我所需要的，即使我怀疑它会产生一些开销。

推荐阅读