时间戳

首页 > 解决方案 > 在从注册表单中检索名称之前触发 Firebase onAuthStateChanged()？

javascript - 在从注册表单中检索名称之前触发 Firebase onAuthStateChanged()？

问题描述

我正在使用普通的 HTML、CSS 和 JS 创建一个仪表板，并将 Firebase 作为我的后端。在我的signup.html页面中，我有一个表单，允许用户输入他们的姓名以及他们的电子邮件地址和密码。注册后，用户将被重定向到dashboard.html他们的个性化内容。在仪表板内部，它有一个显示其名称的位置。

问题是它并不总是从表单中获取名称，如果它没有从注册表单中获取用户名，那么它只是没有他们的名字，因为我没有“添加名称”功能仪表板。我怀疑这是因为我使用onAuthStateChanged()inside的方式signup.html。

以下是我的注册页面JS代码：

firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
        window.location.replace('dashboard.html')
    } else {
        return
    }
});

document.querySelector('#signup_btn').addEventListener("click", (e) => {
    e.preventDefault();

    var user_email = document.getElementById('user_email').value;
    var user_pass = document.getElementById('user_pass').value;
    var user_name = document.getElementById('user_name').value;

    // Sign Up
    firebase.auth().createUserWithEmailAndPassword(user_email, user_pass)
        // Success
        .then((userCredentials) => {
            userCredentials.user.updateProfile({
                displayName: user_name
            })
        })
        // Errors
        .catch(function (error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            if (errorCode == 'auth/weak-password') {
                alert('The password is too weak.');
            } else {
                alert(errorMessage);
            }
            console.log(error);
        });
})

如果有帮助，这是我signup.html页面中的表格：

<form>
        <h1>Sign Up</h1>
        <!-- <h2>Log into your account using your email address</h2> -->

        <label for="user_name">Name</label>
        <input type="text" name="name" id="user_name">

        <label for="user_email">Email Address</label>
        <input type="text" name="email" id="user_email">

        <label for="user_pass">Password</label>
        <input type="password" name="Password" id="user_pass">

        <button type="submit" id="signup_btn">Sign Up</button>

        <p>Already have an account? <a href="./index.html">Log In</a></p>
    </form>

标签： javascriptfirebasefirebase-authentication

解决方案

似乎您的onAuthStateChanged侦听器在写入数据库完成之前被触发。这是 API 的预期行为，但不是您想要的。

由于您确实想使用onAuthStateChanged侦听器在页面重新加载时导航，所以我能想到的最好的方法是在用户单击注册按钮时关闭侦听器：

//  store the unsubscribe function in a variable
var unsubscribe = firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
        window.location.replace('dashboard.html')
    } else {
        return
    }
});

document.querySelector('#signup_btn').addEventListener("click", (e) => {
    e.preventDefault();

    unsubscribe(); //  turn off auth state listener

    var user_email = document.getElementById('user_email').value;
    var user_pass = document.getElementById('user_pass').value;
    var user_name = document.getElementById('user_name').value;

    // Sign Up
    firebase.auth().createUserWithEmailAndPassword(user_email, user_pass)
        // Success
        .then((userCredentials) => {
            return userCredentials.user.updateProfile({ //  add a return
                displayName: user_name
            })
        })
        .then(() => {
            window.location.replace('dashboard.html') //  explicitly navigate here
        })

推荐阅读