Firebase OnAuthStateChanged函数不返回任何内容

Question

I use Firebase password-based Authentication in my login.html . I have 2 text box and 3 buttons.

I use firebase.OnAuthStateChanged to know if user is logged in or logged out. When the user is logged in, the password text box and login button should be hidden, so I use display : none; for it. And when the user is logged out, the logout button should be hidden.

---

The buttons are working perfectly, but the real problem is in the if elseif statement.

Below is my JavaScript code.

PS : Feel free to use the Firebase config to test. Or use this login:

• email: sa@sa.sa
• password : 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

Like most firebase calls, onAuthStateChanged() runs asynchronously, so you need to set it up with a callback:

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);
  }
});

Alternatively, you could simply put the usigned() code inline...

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");
  }
});