使用Vue.js从Firebase获取用户电子邮件

Question

我正在使用Vue.js和Firebase构建一个聊天应用程序。

我对vue和firebase都是陌生的，我一直在努力获取用户电子邮件，因此我可以将其发送到firebase与聊天一起显示。

我已经尝试过以下解决方案： 我如何才能使用户进入Firebase数据库，以便使用vuejs从组件进行编写？

但是无法使其正常工作。 我想我真的不知道我在哪里，如何或何时可以访问root。 原因是当我尝试this。$ root.something时出现错误消息。

这段代码在我的main.js文件中：

firebase.auth().onAuthStateChanged(function(user) {
    if (!app) { 
        /* eslint-disable no-new */
        app = new Vue({
          el: '#app',
          data: {email: user.email}, //here i want to store the email, which works but I cant access it from other components
          template: '<App/>',
          components: { App },
          router 
        })
    }
});

这是我主要组件中的脚本。 我想在这里成为根。

<script>
    import * as firebase from 'firebase'

    export default {
        name: 'chat',
        data: function(){
            return {
                room: null,
                db: null, // assign Firebase SDK later
                messageInput:'', // this is for v-model
                messages: [],
            }
        },
        mounted() {
            this.db = firebase
            // access the location and initilize a Firebase reference
            this.init()
        },
        methods: {
            init(){
                this.room = this.db.database().ref().child('chatroom/1')
                this.messageListener()
                this.saveEmail();
            },
            saveEmail(){
//here i tried to save the email using the onAuthStateChanged method
                firebase.auth().onAuthStateChanged(function(user) {
                    this.$root.email = user.email;
                });
            },
            send(messageInput) {
                //A data entry.
                let data = {
                    message: messageInput
//here i want to add it to the database
                    // user: this.$root.email
                };
                // Get a key for a new message.
                let key = this.room.push().key;
                this.room.child('messages/' + key).set(data)
                // clean the message
                this.messageInput = ''
            },

            messageListener () {      
                this.room.child('messages').on('child_added', (snapshot) => {
                    // push the snapshot value into a data attribute
                    this.messages.push(snapshot.val())
                })
            },
            logout(){
                firebase.auth().signOut().then(() => {
                    this.$root.email = null;
                    this.$router.replace('login');
                })
            },  
        }
    }
</script>

这是我的登录组件中的脚本：

<script>

    import firebase from 'firebase'

    export default {
        name: 'login',
        data: function(){
            return {
                email: '',
                password: '',
            }
        },
        methods: {
            signIn: function(){
                firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
                    (user) => {
                        this.$root.email = user.email;
                        this.$router.replace('chat');
                    },
                    (err) => {
                        alert('Opppps! ' + err.message);
                    }
                );
            },
        }
    }

</script>

对不起，如果我不清楚。 提前致谢！

Answer 1

onAuthStateChanged方法的回调绑定到错误的此作用域。 您可以使用以下箭头功能轻松修复此问题。 使用箭头功能时，它将自动绑定到定义它的上下文。

saveEmail() {
  firebase.auth().onAuthStateChanged((user) => {
    this.$root.email = user.email;
  })
}