createUserWithEmailAndPassword之后无法使用collection.set

时间:2018-12-17 15:54:56

标签: javascript firebase vue.js google-cloud-firestore vuetify.js

我有一个注册用户页面,其中一半有效,一半无效。

有效的方法:我能够通过Firebase Firestore成功运行createUserWithEamilAndPassword调用。

不起作用:在该调用的Promise中,我试图获取用户对象,拉出uid,然后在firestore数据库中创建一个匹配的用户。问题是,每当我运行collection("users").set时,都会收到一个错误消息,指出默认集合不是函数。 (请参见下面的“控制台错误”。)

我正在读取该错误为vue或firebase,无法将fb.collection('users').doc(res.user.uid).set...识别为有效函数。当我忘记包含一个组件时,我已经习惯了该错误,但是(如下所示),我之前在调用中已经使用过fb.auth...

非常感谢您的帮助!

控制台错误:

LOGIN ERRORs TypeError: _components_firebase_firebaseInit__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function
    at index.js:193
    at e.g (vendors.app.js:440)
    at Fb (vendors.app.js:443)
    at Bb (vendors.app.js:443)
    at A.push../node_modules/@firebase/auth/dist/auth.esm.js.g.Xb (vendors.app.js:442)
    at kb (vendors.app.js:436)

模板:

<template>

  <v-layout>

          <v-text-field
            v-model="first_name"
            :rules="[rules.required]"
            label="First Name"
            required/>


          <v-text-field
            v-model="last_name"
            :rules="[rules.required]"
            label="Last Name"
            required/>
          <br>

          <v-text-field
            v-model="email"
            :rules="[rules.required]"
            label="Email Address"
            required/>
          <br>

          <v-text-field
            v-model="password"
            :append-icon="showPass ? 'visibility_off' : 'visibility'"
            :rules="[rules.required]"
            :type="showPass ? 'text' : 'password'"
            label="Password"
            hint="At least 8 characters"
            min="8"
            counter
            @click:append="showPass = !showPass" />
          <br>

          <v-text-field
            v-model="confirmation"
            :append-icon="showConf ? 'visibility_off' : 'visibility'"
            :rules="[rules.required, rules.emailMatch]"
            :type="showConf ? 'text' : 'password'"
            name="input-10-2"
            label="Password (again)"
            hint="At least 8 characters"
            value="Pa"
            @click:append="showConf = !showConf" />
          <br>

          <v-spacer/>
          <v-btn
            color="pink"
            class="color: #FFFFFF"
            dark
            flat
            round
            @click="goLogin()">Return to Login Page</v-btn>
          <v-btn
            color="primary"
            class="color: #FFFFFF"
            dark
            @click="signup()">Register</v-btn>


  </v-layout>
</template>

脚本

<script>
import fb from '../../components/firebase/firebaseInit'

export default {
  layout: 'auth',
  data () {
    return {
      email: faker.internet.email(),
      password: '11112222',
      confirmation: '11112222',
      showPass: false,
      showConf: false,
      rules: {
          required: value => !!value || 'Required.',
          // min: v => v.length >= 8 || 'Min 8 characters',
          emailMatch: this.password == this.confirmation || ('The password and confirmation you entered don\'t match')
        }
    }
  },

  // methods: mapActions('auth', ['login']),
  methods: {

    signup: function(email,password) {
      let _this = this
      console.log("STORE", this.$store);

      fb.auth.createUserWithEmailAndPassword(this.email, this.password)
      .then(function (res) {

        _this.$store.commit('setCurrentUser', res.user)
        console.log("INSIDE with user",res.user.uid);
        console.log("INSIDE with this.email",_this.email);

        // **********************************
        // *** THIS IS WHAT"S NOT WORKING ***
        // FYI, I even tried to simply hard code in a number                                                
        //  for the uid (e.g., .doc()) and still received the
        //  error. Also, res.user and res.user.uid are valid.
        // **********************************
        fb.collection('users').doc(res.user.uid).set({
          email: _this.email
        })
        .then(() => {
          // SETTING PROFILE
          _this.$store.dispatch('fetchUserProfile')
          _this.$router.push('/')
        }).catch(err => {
          console.log(err)
        })

      }).catch(err => {
          console.log("LOGIN ERRORs", err)
      })
    },

}
</script>

firebaseConfig

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

const config = {
  // REMOVED THE VALUES FOR SECURITY, but they are correct in the app
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
}

firebase.initializeApp(config)

// firebase utils
const db = firebase.firestore()
const auth = firebase.auth()
const currentUser = auth.currentUser

// date issue fix according to firebase
const settings = {
    timestampsInSnapshots: true
}
db.settings(settings)

export default {
  db,
  auth,
  currentUser
}

1 个答案:

答案 0 :(得分:0)

创建用户时,代码使用fb.auth

  fb.auth.createUserWithEmailAndPassword(this.email, this.password)

要访问Cloud Firestore,请使用配置文件中设置的Firestore参数,就像Auth的代码一样。

    fb.db.collection('users').doc(res.user.uid).set({
      email: _this.email
    })