Firebase Web 实时数据库未更新

Question

当我通过 firebase 密码身份验证创建新用户时，我正在尝试使用用户信息更新我的 firebase 实时数据库。成功登录后，我将转到另一个页面。问题是我的数据库在上述情况下没有得到更新，但是如果留在登录页面并且不更改为任何其他 url；数据库已更新。

这是我的创建用户代码

firebase
    .auth()
    .createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
        // Signed in
        var user = userCredential.user;
        if (user !== null) {
            const db = firebase.database();
            db.ref("/").set({
                uid: user.uid,
            });
        }
        // ...
    })
    .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode, errorMessage);
        // ..
    });

这里是我要切换到另一个页面的地方，

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        // User is signed in, see docs for a list of available properties
        // https://firebase.google.com/docs/reference/js/firebase.User
        var uid = user.uid;
        console.log(user);
        //If I remove the below line, database is updated
        window.location.href = "../html/home.html";
        // ...
    } else {
        // User is signed out
        // ...
        console.log("not logged in");
    }
});

Answer 1

这个调用是异步的：

db.ref("/").set({
  uid: user.uid,
});

表示代码在set()函数返回后继续运行，异步发送数据到数据库。但是当你更改window.location 时，它会中断这个写操作。这也是当您不将用户发送到新位置时它起作用的原因：写入操作可以在不中断的情况下完成。

一个快速简单的解决方法是在更新数据库时标记：

isCreatingUser = true; // ? Flag that we're creating a user
firebase
    .auth()
    .createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
        var user = userCredential.user;
        if (user !== null) {
            const db = firebase.database();
            db.ref("/").set({
                uid: user.uid,
            }).then(() => {
                isCreatingUser = false; // ? We're done
                window.location.href = "../html/home.html";  // ? Navigate away
            }).catch((e) => {
                isCreatingUser = false; // ? We're done
                throw e;
            })
        }
        // ...
    })
    .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode, errorMessage);
        // ..
        isCreatingUser = false; // ? We're done
    });

然后：

firebase.auth().onAuthStateChanged((user) => {
    if (user && !isCreatingUser) {
        ...

您可能需要更多同步，但这就是要点。