Javascript 显示基于firebase身份验证的DOM元素的首选方式是什么

我正试图建立一个小网页，其中登录由Firebase Google Auth控制，并弹出个人资料页面。显示个人资料页面的安全和首选方式是什么

---

目前，我正在使用

onAuthStateChanged

操作特定的div，该div在用户登录时保存配置文件数据。如果用户未登录，我将使用

removeChild（）

方法从DOM中删除该div，并在登录时

appendChild（）

添加回该div。

假设您使用的是

firebase

的本机函数

以及

firebase.auth（）.currentUser

检查用户当前是否登录

在这种情况下，使用

removeChild

和

appendChild

是完全可以的，它们不存在任何安全威胁，就像用户没有登录一样，在页面刷新后，所有信息都将消失

下面是一个小型firebase应用程序，它显示当关闭与firebase的连接并使用

removeChild

时，

appendChild

会在firebase断开连接时停止工作，从而证明使用它是安全的

请注意，在这个示例中，我没有测试任何身份验证，只测试firebase与

removeChild

和

appendChild

的结合使用

---

您可以看到，一旦与Firebase的连接结束，前端不会发生任何变化。

使用

onAuthStateChanged

方法，我们可以根据状态变化采取行动（登录或注销）

例如：

firebase.auth().onAuthStateChanged(user=>{ 
  if(user){
    document.getElementById("id").classList.remove('hide')
    //this will populate your class which associate with above id.
  } else{
    document.getElementById("id_of_your_div").classList.add('hide')
  }
})

---

我认为在应用程序中使用基于firebase身份验证状态更改的方法是可以的。

尝试通过以下方式连接代码： var userCurrent=firebase.auth（）.currentUser；在函数中

注意：请确保首先登录（作为异步操作），然后更新用户数据，如下所示：

       var authenticationRef = firebase.auth();
    authenticationRef.onAuthStateChanged(function(user) {
        if (user) {
            console.log('onAuthStateChanged : '+user.displayName);
            _updateUser();
        } else {
            console.log('Not login');
        }
    });

    fucntion _updateUser(){
      var userCurrent = firebase.auth().currentUser;
        userCurrent.updateProfile({
        displayName: "Karthik.S",
      }).then(function() {
        var displayName = userCurrent.displayName;
      }, function(error) {

      });
  }

---

您对profile div过早显示的“安全”顾虑是什么？据推测，数据将存储在Firebase中，用户在访问之前需要登录Firebase。

       var authenticationRef = firebase.auth();
    authenticationRef.onAuthStateChanged(function(user) {
        if (user) {
            console.log('onAuthStateChanged : '+user.displayName);
            _updateUser();
        } else {
            console.log('Not login');
        }
    });

    fucntion _updateUser(){
      var userCurrent = firebase.auth().currentUser;
        userCurrent.updateProfile({
        displayName: "Karthik.S",
      }).then(function() {
        var displayName = userCurrent.displayName;
      }, function(error) {

      });
  }