显示基于 Firebase 身份验证的 DOM 元素的首选方式是啥

Posted 2023-02-19

【中文标题】显示基于 Firebase 身份验证的 DOM 元素的首选方式是啥

【英文标题】：What is preferred way to show DOM elements conditioned on firebase authentication显示基于 Firebase 身份验证的 DOM 元素的首选方式是什么

【发布时间】：2019-08-31 20:17:40

【问题描述】：

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

目前我正在使用onAuthStateChanged 来操作特定的 div，该 div 在用户登录时保存个人资料数据。如果用户未登录，我将使用 removeChild() 方法从 DOM 中删除该 div，并在登录时 appendChild() 添加回该 div。

【问题讨论】：

您对配置文件 div 过早显示的“安全”问题有何担忧，因为据推测数据将存储在 Firebase 中，用户在访问之前需要登录。

【参考方案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/

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

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

【参考方案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 和 appendChild 方法。

【参考方案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) 

      );