Flutter(Dart)+Firebase实现已登录用户跳过登录页的方法

核心思路 #

Firebase Auth提供了onAuthStateChanged监听器，能实时监听用户认证状态变化（登录、退出、会话过期等），通过这个监听器可以自动控制登录页和主内容页的显示/隐藏，无需手动写不可靠的初始化时判断逻辑。

完整代码示例 #

1. Firebase初始化与状态监听（JavaScript）

// 替换为你的Firebase项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

// 监听用户状态变化
auth.onAuthStateChanged((user) => {
  const loginPage = document.getElementById('login-page');
  const mainContent = document.getElementById('main-content');

  if (user) {
    // 用户已登录：隐藏登录页，显示主内容
    loginPage.style.display = 'none';
    mainContent.style.display = 'block';
    // 可在此获取用户信息：user.displayName、user.photoURL等
  } else {
    // 用户未登录/会话过期：显示登录页，隐藏主内容
    loginPage.style.display = 'block';
    mainContent.style.display = 'none';
  }
});

// Google登录实现
function signInWithGoogle() {
  const provider = new firebase.auth.GoogleAuthProvider();
  auth.signInWithPopup(provider)
    .catch((error) => {
      console.error('登录失败:', error.message);
    });
}

// 退出登录实现
function signOut() {
  auth.signOut()
    .catch((error) => {
      console.error('退出失败:', error.message);
    });
}

2. 页面结构（HTML）

<!-- 登录页面 -->
<div id="login-page">
  <h2>登录</h2>
  <button onclick="signInWithGoogle()">使用Google登录</button>
</div>

<!-- 登录后显示的主内容 -->
<div id="main-content" style="display: none;">
  <h2>欢迎访问</h2>
  <p>你已成功登录</p>
  <button onclick="signOut()">退出登录</button>
</div>

关键注意事项 #

• 不要在页面加载时直接判断auth.currentUser：Firebase初始化需要时间，此时currentUser可能为null，导致误判未登录。onAuthStateChanged会在Firebase完成初始化后自动触发，保证状态判断准确。
• 会话过期处理：Firebase默认会持久化用户会话（local模式），当会话过期时，onAuthStateChanged会自动触发，将user设为null，页面自动切换回登录页。
• 确保已在Firebase控制台启用Google登录方式：进入Firebase控制台 → 认证 → 登录方法 → 启用Google登录，并配置授权域名。

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