如何在Vue JS项目中检测用户的Firebase身份验证登录状态？

如何解决如何在Vue JS项目中检测用户的Firebase身份验证登录状态？

我正在尝试检测用户状态。如果用户已登录，我想将数据“ userstate”设置为true。我正在将vuefire和Firebase用于我的vue项目。我尝试了如下所示的方法，但是它不起作用

 data() {
    return {
        userstate:false
    };
  },watch:{
    userstate:{
    firebase.auth().onAuthStateChanged(function(user){
        if(user){
        this.userstate= true;}
        else{
        this.userstate=false;
        }
        })}

解决方法

在Firebase中，您可以使用Firebase提供的功能 auth（）。currentUser

来检查用户是否已登录。

// user will return true which means user EXISTS!
let user = firebase.auth().currentUser; 

if (user) {  
  this.userstate = true; // If it exists
} else { 
 this.userstate = false; // If it doesn't
} 

在某些情况下，上述方法会为用户返回 null / undefined 。因此，该解决方案适用于您现有的解决方案。因此，在这种情况下，请尝试将现有功能修改为此：

async function IsLoggedIn() {
try {
 await new Promise((resolve,reject) =>
  firbase.auth().onAuthStateChanged(
    user => {
      if (user) {
        // Yes User is signed in.
        resolve('User is there');
      } else {
        // No user is not signed in.
        reject('There is no user');
      }
    },// Prevent console errors
    error => reject(error)
  )
)
return true
} catch (error) {
  return false
 }
}

,

此外，由于您打算观察auth状态的更改，因此您可以在初始化Firebase之后直接注册侦听器，因此不必将其插入VueJS watch块中，您可以将其插入到例如main.js，如果您正在使用VueX之类的商店，则可以更新商店中的状态，并从VueX应用程序的任何组件中提取该信息。

firebase.initializeApp(configOptions);

firebase.auth().onAuthStateChanged(user => {
    if (user) {  
        this.userstate = true;
    } else { 
        this.userstate = false;
    } 
});