Flutter Web中Firebase Auth的authStateChanges()多次触发问题

问题原因 #

你的authStateChanges流触发两次，导致HomeScreen重复渲染，主要是Web端Firebase Auth的特性导致：

• 页面刷新后，Firebase Auth初始化过程中会确认本地缓存的用户会话，这个过程可能让authStateChanges流连续发射两次相同的用户状态——第一次是main函数中完成匿名登录后触发，第二次是Firebase内部完成状态同步后再次触发。
• 另外，main函数中同步判断currentUser == null的时机存在问题：Firebase Auth还没完全初始化时，currentUser暂时为null，导致重复执行signInAnonymously()，进一步触发两次auth状态变更。

解决方案 #

方案1：过滤流中的重复事件 #

给authStateChanges流添加distinct()操作符，它会自动过滤连续重复的事件，确保相同的用户状态只会触发一次builder：

StreamBuilder<User?>(
  stream: FirebaseAuth.instance.authStateChanges().distinct(), // 新增distinct()
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return const Text('Error!');
    } else if (snapshot.hasData) {
      print("HOME");
      return const HomeScreen();
    } else {
      return Container();
    }
  },
)

方案2：调整登录逻辑，避免重复登录 #

把main中的登录逻辑移到StreamBuilder中，确保只有在确认无用户会话时才执行匿名登录，避免重复触发状态变更：

首先修改main函数：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

然后将AppRoot改为StatefulWidget，在未登录分支处理登录：

class AppRoot extends StatefulWidget {
  const AppRoot({Key? key}) : super(key: key);

  @override
  State<AppRoot> createState() => _AppRootState();
}

class _AppRootState extends State<AppRoot> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<User?>(
          stream: FirebaseAuth.instance.authStateChanges(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return const Text('Error!');
            } else if (snapshot.hasData) {
              print("HOME");
              return const HomeScreen();
            } else {
              // 延迟执行登录，避免在builder中直接做异步操作
              WidgetsBinding.instance.addPostFrameCallback((_) async {
                try {
                  await FirebaseAuth.instance.signInAnonymously();
                } catch (e) {
                  print(e);
                }
              });
              return const CircularProgressIndicator();
            }
          }),
    );
  }
}

额外优化：避免HomeScreen重复初始化资源 #

如果不想修改流的逻辑，也可以在HomeScreen中添加初始化标记，防止重复获取资源：

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _hasInited = false;

  @override
  void initState() {
    super.initState();
    if (!_hasInited) {
      // 这里执行资源获取逻辑
      print("初始化资源");
      _hasInited = true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text("Home Page")));
  }
}

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