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

时间:2019-04-10 11:27:23

标签: javascript firebase firebase-authentication server-side client-side

我正在尝试构建一个小的网页,该网页的登录由Firebase Google Auth控制,并随个人资料页面一起弹出。显示个人资料页面的安全且首选方式是什么?

当前,我正在使用onAuthStateChanged来操作特定的div,该div在用户登录时保存配置文件数据。如果用户未登录,则我正在使用removeChild()方法从DOM中删除该div,并在登录时appendChild()重新添加了该div。

3 个答案:

答案 0 :(得分:0)

假设您正在使用firebase的本机firebase.auth().onAuthStateChanged函数

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

还有firebase.auth().currentUser来检查用户当前是否登录。

在这种情况下,最好使用removeChildappendChild,并且它们不存在任何安全威胁,就像用户没有登录一样,刷新页面后所有信息都会消失

这是一个小的Firebase应用程序,它显示关闭与Firebase的连接并使用removeChild时,由于Firebase断开连接,appendChild停止工作,因此证明了使用安全性。

https://jsfiddle.net/vh9xay6e/

请注意,在此示例中,我不测试任何身份验证,而仅将Firebase与removeChildappendChild一起使用。

您可以看到,一旦与Firebase的连接结束,前端端的任何情况都无法改变。

答案 1 :(得分:0)

使用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身份验证状态的变化使用removeChildappendChild方法。

答案 2 :(得分:0)

尝试通过以下方式连接代码: 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) {

      });
  }