Firebase OnAuthStateChanged 函数不返回任何内容答案

【问题标题】：Firebase OnAuthStateChanged function not returning anythingFirebase OnAuthStateChanged 函数不返回任何内容
【发布时间】：2017-06-23 05:35:22
【问题描述】：

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

【问题讨论】：

标签： javascript jquery firebase firebase-authentication

【解决方案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");
  }
});

【讨论】：