以 firebase 身份验证为条件显示 DOM 元素的首选方式是什么

Question

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

目前我正在使用 onAuthStateChanged 来操作特定的 div，它在用户登录时保存配置文件数据。如果用户未登录，我将使用 removeChild() 方法从 DOM 中删除 div 并在登录后 appendChild() 添加回 div.

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 停止工作，因为 firebase 已断开连接，从而证明它是安全的使用。

https://jsfiddle.net/vh9xay6e/

请注意，在这个例子中我没有测试任何身份验证，只是使用 firebase 与 removeChild 和 appendChild。

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

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 身份验证状态更改的 removeChild and appendChild 方法是可以的。

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) {

      });
  }

以 firebase 身份验证为条件显示 DOM 元素的首选方式是什么

What is preferred way to show DOM elements conditioned on firebase authentication

javascript

server-side

client-side

firebase

firebase-authentication