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

Question

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

目前，我正在使用onAuthStateChanged特定的 div 来操作用户登录时保存配置文件数据的 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 断开连接而停止工作，从而证明它可以安全使用。

请注意，在本示例中，我没有测试任何身份验证，只是测试使用 firebaseremoveChild和appendChild。

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