Firebase认证状态无法持久化：登录跳转后立即返回登录页求助

核心问题1：登录页强制登出用户 #

登录页JS开头直接调用了signOut(auth)，页面一加载就会强制用户登出，哪怕之前已经登录成功，直接清空了认证状态。

核心问题2：异步登录未完成就跳转 #

signInWithEmailAndPassword是异步操作，你现在在调用后立刻执行window.location.href，此时登录请求还没完成、认证状态还没写入本地存储，跳转到主页后onAuthStateChanged检测不到用户，自然会跳转回登录页。

修复后的代码示例 #

登录页面JS修复版 #

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js";
import { getAuth , signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js";

const firebaseApp = initializeApp({
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
})

const auth = getAuth(firebaseApp);

// 移除页面加载时的强制登出代码
// signOut(auth).then(() => { ... }).catch(() => { ... });

// 页面加载时先检测用户状态，已登录直接跳主页
onAuthStateChanged(auth, (user) => {
  if (user) {
    window.location.href = "/main.html";
  }
});

document.getElementById("login-button").addEventListener("click", myFunction);

async function myFunction() {
    const x = document.getElementById("login-form");
    const email = x.elements[0].value;
    const password = x.elements[1].value;
    console.log(email + password);

    try {
        // 等待登录请求完成后再跳转
        const userCredential = await signInWithEmailAndPassword(auth, email, password);
        window.location.href = "/main.html";
    } catch (error) {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.error("登录失败:", errorCode, errorMessage);
    }
}

主页JS优化版 #

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js";
import { getAuth , onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js";

const firebaseApp = initializeApp({
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
})

const auth = getAuth(firebaseApp);

onAuthStateChanged(auth, (user) => {
  if (!user) {
    // 未登录才跳转回登录页
    window.location.href = "/index.html";
  } else {
    console.log("当前登录用户:", user);
  }
});

// auth.currentUser可能为null，因为Firebase初始化需要时间，依赖onAuthStateChanged更可靠
// console.log(auth.currentUser);

额外注意事项 #

• 确保Firebase控制台已启用邮箱/密码登录方式
• 检查Live Server运行时页面路径是否正确（比如/main.html是否在项目根目录）
• 若仍有持久化问题，可显式设置本地存储持久化（默认就是这个选项，可确保状态留存）：

// 在登录前添加这段代码
import { setPersistence, browserLocalPersistence } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js";

async function myFunction() {
  // ...获取邮箱和密码...
  try {
    await setPersistence(auth, browserLocalPersistence);
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    window.location.href = "/main.html";
  } catch (error) {
    console.error("登录失败:", error);
  }
}

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