基于Firebase身份验证，展示DOM元素的首选方法是什么？

Question

我正在尝试构建一个小型网页，其中Firebase Google Auth控制登录，并弹出个人资料页面。展示个人资料页面的安全和首选方法是什么？

目前我正在使用onAuthStateChanged来操作特定的

，该

保存着用户登录后的个人资料数据。如果用户未登录，则使用removeChild（）方法将该

从DOM中删除；当用户登录时，appendChild（）会重新添加该

。

- Jarnu Girdhar

---

你对个人资料 div 提前显示有什么“安全”顾虑，因为数据预计将存储在 Firebase 中，用户需要登录才能访问。 - Tom Anderson

Answer 1

假设您正在使用 firebase 的原生 firebase.auth().onAuthStateChanged 函数。

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

除了使用firebase.auth().currentUser检查用户当前是否已登录，还可以这样做。

在这种情况下，使用removeChild和appendChild是完全可以的，它们不会带来任何安全威胁，因为如果用户没有登录，在页面刷新后所有信息都将消失。

这是一个小型的Firebase应用程序，当与Firebase的连接关闭并且使用removeChild时，appendChild停止工作，从而证明了其安全性。

https://jsfiddle.net/vh9xay6e/

请注意，在此示例中，我没有测试任何身份验证，只是使用firebase和removeChild以及appendChild。

您可以看到，一旦与Firebase的连接结束，前端方面就无法发生任何改变。

- Alexandre Elshobokshy

Answer 2

使用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身份验证状态更改使用{{link1：removeChild}}和{{link2：appendChild}}方法是可以的。

- Ransaka Ravihara

Answer 3

尝试通过以下方式在您的代码中进行连接： 在一个函数中使用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) {

      });
  }

- Karthik S