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

Posted 2023-02-16

【中文标题】如何在 Vue 中设置身份验证状态更改？

【英文标题】：How do I set authetication state change in 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.
  
);
 

【参考方案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