firebase - 如何在加载我的网页之前优先考虑 Firebase Web 身份验证

Question

我有一个简单的登录布局。当用户登录网页时，我想停止加载或显示它。一切正常，但是在验证 firebase 身份验证时似乎有一点延迟，这就是为什么每当我刷新网页时，登录布局仍然显示得非常短暂。我希望它不被完全看到。

这是我的问题的视频

如您所见，在视频中用户已经登录。但是登录的用户名和密码以及按钮仍然显示得很简短。

标签： firebaseauthenticationwebfirebase-authentication

Answer 1

您不共享任何代码，但我假设您使用onAuthStateChanged()观察者。如文档中所述，here和here，Auth对象需要在触发观察者之前进行初始化，因此您无法避免遇到的行为。

您需要按如下方式管理自己的显示：

• 在Auth对象完全初始化之前（即 Auth 对象处于中间状态），显示带有微调器的欢迎/默认页面
• 如果用户已经登录，则显示相关页面
• 如果用户未登录，则显示登录页面

以下（伪注释代码）行：

// Show the spinner
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    // Hide the spinner and show content
  } else {
    // No user is signed in.
    // Hide the spinner and show the login form
  }
});