在知道 firebase 身份验证状态之前，不要显示 HTML 页面的内容

Question

我正在使用纯 HTML 和 javascript 构建一个小型站点，并且我正在使用 Firebase 进行身份验证。当用户转到某个页面时，如果他们已登录，我想将他们重定向到另一个页面。这是我用来实现该目的的代码（所有脚本都放在 <head> 中）：

   <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>

   <script>
      const firebaseConfig = {
         // ...
      };

      firebase.initializeApp(firebaseConfig);

      firebase.auth().onAuthStateChanged((user) => {
         if (user) {
             window.location.href = "/feed";
         }
      });
   </script>

这会正确地重定向用户，但在 Firebase 获取身份验证状态和触发 onAuthStateChanged 回调期间，用户会短暂地看到针对未经过身份验证的用户的页面。有没有一种方法可以在调用 onAuthStateChanged 之前阻止呈现 HTML 页面？

Answer 1

你试过了吗async/await？

一旦 Html 文件从上到下呈现并且您没有使用 async/await 方法，html 将在它是异步函数后继续呈现。

我建议您像这样尝试，以强制渲染等待身份验证响应：

<script>
  const firebaseConfig = {
     // ...
  };

  firebase.initializeApp(firebaseConfig);
  
  async function firebaseAuth(){
    try{
      const authResponse = await firebase.auth().onAuthStateChanged((user) => {
        window.location.href = "/feed";
      });
    }catch(e){
      console.log(e);
    }
  };

  firebaseAuth();
</script>

您可以在文档上阅读更多内容： https://www.w3schools.com/js/js_async.asp

Answer 2

Firebase 会在页面加载时自动恢复用户。但是，这需要调用服务器，其中包括检查帐户是否被禁用，因此可能需要一些时间。

常见的解决方法是将您自己的值存储在本地存储中，该值指示您是否认为用户可能登录，并且（如果是）重定向到经过身份验证的马上翻页。

If/when 用户曾经登录过，你会在 that 页面中有一个身份验证状态侦听器来将他们重定向回来，所以大多数用户会看到在那种情况下，快乐之路。

Firebaser Michael Bleigh 在 Google I/O here.

的一次演讲中对此进行了介绍

在知道 firebase 身份验证状态之前，不要显示 HTML 页面的内容

Don't show contents of HTML page until firebase auth status is known

html

javascript

firebase-authentication