如何在 Vue 中设置身份验证状态更改？

【问题标题】：How do I set authetication state change in Vue?如何在 Vue 中设置身份验证状态更改？
【发布时间】：2021-01-02 11:53:09
【问题描述】：

登录后，我想设置用户登录的状态。我在哪里输入这个代码？我还有一个带有 Hello，Sign in 的菜单组件。我想将其更改为 Hello {{user.email}}，在用户登录时注销。

 firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

【问题讨论】：

标签： firebase vue.js vuejs2 firebase-authentication vuex

【解决方案1】：

在 main.js 中

let app = '';

firebase.auth().onAuthStateChanged(() => {
  if(!app) {
    app = new Vue({
      router,
      store: store,
      render: h => h(App)
    }).$mount('#app')
  }
})

帮助您的组件

<template>

  <div>
    <span v-if="user">Hello {{user.email}}</span>
  </div>

</template>

<script>
 
  import firebase from 'firebase'

  export default {
    data: function() {
      return {
        user: null,
      }
    },
    beforeMount(){
      this.getUser()
    },
    methods: {
      getUser: function() {
        if(firebase.auth().currentUser) {
          this.user = firebase.auth().currentUser.uid
        }
        else {
          this.user = null
        }
      }
    }
  }
</script>

【讨论】：

当我将它添加到 main.js 时，我收到错误 32:15 error 'Vue' is not defined no-undef
从'vue'导入Vue