firebase.initializeApp 回调/承诺？答案

【问题标题】：firebase.initializeApp callback/promise?firebase.initializeApp 回调/承诺？
【发布时间】：2016-09-28 09:02:48
【问题描述】：

这是我的网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Calcolo Diliuzioni</title>

    </head>
    <body>

        <h1>My app</h1>

        <!-- Libreria per gestire l'autenticazione con google -->
        <script src="https://apis.google.com/js/platform.js" async defer></script>

        <!-- Firebae config -->
        <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
        <script>
        // Initialize Firebase
        var config = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        storageBucket: "",
        };
        firebase.initializeApp(config);
        </script>

        <script type="text/javascript">
            var user = firebase.auth().currentUser;
            if (user) {
                console.log(user);
            } else {
                console.log(user);
            }
        </script>
    </body>
</html>

假设我有一个已经登录的用户。当我在控制台中加载页面时，我得到了null。虽然我期望拥有当前用户的对象。

如果我在浏览器控制台中运行相同的代码

var user = firebase.auth().currentUser;
if (user) {
    console.log(user);
} else {
    console.log(user);
}

我能够得到当前用户的对象。

我认为firebase.initializeApp(config); 有一些异步行为。解决它的正确方法是什么？我应该在firebase.initializeApp(config); 函数上使用承诺或其他东西吗？一种回调..

【问题讨论】：

你看过这个firebase.google.com/docs/auth/web/manage-users 吗？它涵盖了您的情况

标签： javascript web firebase firebase-authentication

【解决方案1】：

初始化应用程序是同步的。但是，确定当前用户状态是异步的。确定当前身份验证状态的正确方法是使用观察者： https://firebase.google.com/docs/auth/web/manage-users

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in and currentUser will no longer return null.
  } else {
    // No user is signed in.
  }
});

【讨论】：

如果在加载 firebase 之后和我添加此处理程序之前状态发生了变化怎么办？或者如果状态永远不会改变？
这个监听器也会在初始化时触发。

【解决方案2】：

我会将两种方法结合在一起：

function canActivate(){
    return new Promise(resolve => {
        if (firebase.auth().currentUser) {
            resolve(true);
        } else {
            const unsubscribe = firebase.auth().onAuthStateChanged(function (user) {
                unsubscribe();
                if (user) {
                    resolve(true);
                } else {
                    resolve(false);
                }
            });
        }
    });
}

在 SPA 中，如果用户已经登录并且用户可以访问任何页面，则获取 firebase.auth().currentUser == true。但是如果用户重新加载页面，得到firebase.auth().currentUser == false。用户需要等待firebase.initializeApp(config);完成，所以添加 firebase.auth().onAuthStateChanged 等待初始化完成。

【讨论】：

感谢您的出色解决方案