javascript - 显示基于 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/
请注意，在此示例中，我没有测试任何身份验证，只是使用带有 removeChild 的 firebase和 appendChild .
您可以看到，一旦与 Firebase 的连接结束，前端就不会发生任何改变。