javascript - Firebase OnAuthStateChanged 函数不返回任何内容

Question

我在 login.html 中使用 Firebase 基于密码的身份验证。我有 2 个文本框和 3 个按钮。

我使用 firebase.OnAuthStateChanged 来了解用户是否登录或注销。当用户登录时，密码文本框和登录按钮应该隐藏，所以我使用 display : none; 。当用户注销时，注销按钮应该隐藏。

<小时/>

这些按钮工作正常，但真正的问题出在 if elseif 语句中。

下面是我的 JavaScript 代码。

P.S:请随意使用 Firebase 配置进行测试。或者使用此登录:

• 电子邮件:sa@sa.sa
• 密码:123456

<小时/>

// Initialize Firebase
  var config = {
    apiKey: "AIzaSyDjYqNKbZaom0jplOusloWlr5mOhW2WbgQ",
    authDomain: "awes-e3043.firebaseapp.com",
    databaseURL: "https://awes-e3043.firebaseio.com",
    storageBucket: "awes-e3043.appspot.com",
    messagingSenderId: "191054424051"
  };
  firebase.initializeApp(config);
// SignIn
$("button#in").click(function(){
var email  = document.getElementById('logemail');
var password  = document.getElementById('logpassword');
firebase.auth().signInWithEmailAndPassword(email.value, password.value).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
}).then(function(){
  location.reload();
});
});
// SignOut
$("button#out").click(function(){
firebase.auth().signOut().then(function() {
   console.log("Logged out!")
   location.reload();
}, function(error) {
   console.log(error.code);
   console.log(error.message);
});
});

  $(document).ready(function(){
function usigned(){
 firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    return true;
  } else {
    return false;
  }
}); }
if (usigned() == true) {
  $("#hlogp").css("display", "none");
  $("button#in").css("display", "none");
  $("button#out").css("display", "inline-block")
}else if(usigned() == false) {
  $("button#out").css("display", "none");
  $("#hlogp").css("display", "block");
  $("button#in").css("display", "block");
}
});

Answer 1

与大多数 Firebase 调用一样，onAuthStateChanged() 异步运行，因此您需要使用回调来设置它:

function usigned(bool) {
  if (bool) {
    $("#hlogp").css("display", "none");
    $("button#in").css("display", "none");
    $("button#out").css("display", "inline-block");
  } else {
    $("button#out").css("display", "none");
    $("#hlogp").css("display", "block");
    $("button#in").css("display", "block");
  }
}

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    usigned(true);
  } else {
    usigned(false);
  }
});

或者，您可以简单地将 usigned() 代码内联...

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    $("#hlogp").css("display", "none");
    $("button#in").css("display", "none");
    $("button#out").css("display", "inline-block")
  } else {
    $("button#out").css("display", "none");
    $("#hlogp").css("display", "block");
    $("button#in").css("display", "block");
  }
});