Flutter Web中Firebase Auth退出登录后用户ID仍留存的问题

核心问题 #

你的代码存在几处语法逻辑错误，导致退出登录后用户状态无法正常更新：

1. AuthService语法错误：signOut方法被错误嵌套在static login方法内部，无法被外部正常调用；同时login方法缺少async关键字，导致await无法生效。
2. LoginPage异步逻辑错误：用setState包裹异步函数，setState不支持异步回调，会导致状态更新时机混乱。
3. 未同步用户状态：没有通过FirebaseAuth的状态监听或主动导航来切换页面，退出后旧用户状态未被清除。

修正后的代码 #

AuthService.dart

class AuthService {
  // 修正：添加async关键字，将signOut移到类级别
  static Future<void> login(
      BuildContext context, String email, String password) async {
    try {
      await FirebaseAuth.instance
          .signInWithEmailAndPassword(email: email, password: password);
      // 登录成功后直接跳转首页（可选，也可在UI层处理）
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => Home()));
    } catch (e) {
      print(e);
      // 抛出异常让UI层处理错误提示
      throw e;
    }
  }

  static Future<void> signOut() async {
    await FirebaseAuth.instance.signOut();
  }
}

LoginPage.dart

ElevatedButton(
  onPressed: () async {
    // 移除setState包裹异步逻辑，直接执行登录流程
    if (_loginFormKey.currentState!.validate()) {
      _loginFormKey.currentState!.save();
      try {
        await AuthService.login(context, email!, password!);
      } catch (e) {
        // 显示登录错误提示
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(e.toString())));
      }
    }
  },
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith((states) => Colours.blk),
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
    ),
  ),
  child: const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [Text("Log in")],
  ),
),

Home.dart

IconButton(
  onPressed: () async {
    await AuthService.signOut();
    // 退出后强制跳转登录页，清除旧页面栈
    Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => LoginPage()));
    // 无需setState，页面跳转后会重新构建
  },
  icon: const Icon(IC.MaterialIcons.logout),
),

额外优化建议 #

添加FirebaseAuth状态监听，让APP自动响应用户状态变化：
在根Widget中使用StreamBuilder监听用户状态，无需手动处理导航：

@override
Widget build(BuildContext context) {
  return StreamBuilder<User?>(
    stream: FirebaseAuth.instance.authStateChanges(),
    builder: (context, snapshot) {
      // 根据用户状态自动切换页面
      return snapshot.hasData ? const Home() : const LoginPage();
    },
  );
}

这样不管是登录还是退出，页面都会自动切换，彻底解决用户状态留存问题。

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