Firebase 身份验证 - 如何处理延迟

Question

我已经按照 David East 的视频设置了我的 Firebase 项目，如下所示，在我的 app.js 文件中。我已经删除了我的配置参数。

#topName 指的是页面上显示经过身份验证的用户的用户名的元素。不幸的是，有人登录，或登录后进入该页面，它最初显示 guest ，然后在一段时间后切换到该用户的用户名。这很快(<500 毫秒)但会导致页面呈现两次，这令人困惑。

我怎样才能避免这种情况，我是否需要在本地存储中存储一些东西？

    (function() { 

    //Initialise Firebase
    var config = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: ""
    };

    firebase.initializeApp(config);

    //Add a realtime listener.
    firebase.auth().onAuthStateChanged(firebaseUser => {
        if (firebaseUser) {
            console.log(firebaseUser);
            $('#topName').text(firebaseUser.email);
        }
        else
        {
            console.log('not logged in');
            $('#topName').text("Guest");
        }
    });




}());

Answer 1

这是正常的，这是因为正在输入的数据正在发送到 Firebase 服务器，然后您等待 Firebase 的响应以检查此电子邮件是否经过身份验证。互联网连接也会影响这一点。

后台发生了很多事情，要解决这个问题，可以添加一个加载微调器小部件，或者尝试在本地存储凭据。

要解决这个问题，您可以使用 localStorage 示例:

localStorage.setItem("lastname", "userx"); //store data

document.getElementById("result").innerHTML = localStorage.getItem("lastname") //to retrieve

有关更多信息，请查看:https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

或者你可以使用sessionStorage，更多信息在这里:https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage