Firebase登录后刷新页面用户状态丢失问题咨询

问题描述 #

实现了基于Firebase邮箱密码的登录表单，登录成功后控制台能正常打印用户ID，但刷新页面后，onAuthStateChanged监听器返回null，用户状态丢失。

相关代码 #

HTML登录表单

<div id="alertLogIn" class="alert alert-danger" style="margin: 20px 0px;"></div>
<form id="loginForm">
    <div class="modal-body">
        <div class="form-group">
            <input type="text" class="form-control" id="loginEmail" name="loginEmail" placeholder="e-mail">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" id="loginPassword" placeholder="password">
        </div>
    </div>

    <div style="text-align:center;">
        <input type="submit" id="doLogin" value="LOGIN" class="loginButton2" style="font-size:18px">
    </div>
</form>

JavaScript逻辑

$('#loginForm').on('submit', function (e) {
    e.preventDefault();

    var data = {
        email: $('#loginEmail').val(),
        password: $('#loginPassword').val()
    };

    if (data.email === '') {
        console.log("email is empty");
        $('#alertLogIn').show();
        $('#alertLogIn').text("email is empty");
    } else if (data.password === '') {
        console.log("password is empty");
        $('#alertLogIn').show();
        $('#alertLogIn').text("password is empty");
    } else {
        firebase.auth().signInWithEmailAndPassword(data.email, data.password)
            .then(function (authData) {
                auth = authData;
            })
            .catch(function (error) {
                console.log("Login Failed!", error);
                $('#alertLogIn').show();

                $('#alertLogIn').text(error.message);
            });
    }

});

firebase.auth().onAuthStateChanged(function (user) {
    console.log(user);
    if (user) {
        auth = user;
        getUserName.username = user.uid;
        console.log(getUserName.username);
    } else {
        getUserName.username = null;
        auth = null;
    }
});

var config = {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
};

firebase.initializeApp(config);
//create firebase references
var Auth = firebase.auth();

问题原因 #

核心问题是**onAuthStateChanged监听器的注册时机错误**：你在调用firebase.initializeApp(config)之前就注册了状态监听器。Firebase初始化完成前，Auth模块还未就绪，此时注册的监听器无法捕获页面刷新时的会话恢复过程，导致监听器返回null。

Firebase Auth默认会将用户状态持久化到本地存储，但必须在初始化完成后注册监听器，才能正确监听会话恢复事件。

修复方案 #

1. 调整代码顺序：先初始化Firebase，再注册监听器 #

将firebase.initializeApp(config)放在所有Auth相关逻辑（包括监听器和登录事件）之前，确保Auth模块就绪后再注册监听器。

2. 可选：明确设置持久化类型（默认已为LOCAL，可省略） #

如果之前修改过持久化设置，可手动指定为本地持久化，确保状态跨页面刷新保留。

修改后的完整JavaScript代码 #

// 1. 先初始化Firebase应用
var config = {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
};

firebase.initializeApp(config);
var Auth = firebase.auth();

// 2. 可选：明确设置持久化类型（默认LOCAL，可省略）
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
    .then(() => {
        console.log("持久化设置为本地存储");
    })
    .catch((error) => {
        console.error("设置持久化失败:", error);
    });

// 3. 注册Auth状态监听器
firebase.auth().onAuthStateChanged(function (user) {
    console.log(user);
    if (user) {
        auth = user;
        getUserName.username = user.uid;
        console.log(getUserName.username);
    } else {
        getUserName.username = null;
        auth = null;
    }
});

// 4. 登录表单提交逻辑
$('#loginForm').on('submit', function (e) {
    e.preventDefault();

    var data = {
        email: $('#loginEmail').val(),
        password: $('#loginPassword').val()
    };

    if (data.email === '') {
        console.log("email is empty");
        $('#alertLogIn').show();
        $('#alertLogIn').text("email is empty");
    } else if (data.password === '') {
        console.log("password is empty");
        $('#alertLogIn').show();
        $('#alertLogIn').text("password is empty");
    } else {
        firebase.auth().signInWithEmailAndPassword(data.email, data.password)
            .then(function (authData) {
                auth = authData;
            })
            .catch(function (error) {
                console.log("Login Failed!", error);
                $('#alertLogIn').show();
                $('#alertLogIn').text(error.message);
            });
    }
});

验证 #

修改后重新登录，刷新页面，onAuthStateChanged监听器应该能正确返回当前用户对象，用户状态不会丢失。

内容的提问来源于stack exchange，提问作者letsCode