Flutter中基于Firebase用户类型加载对应页面及会话持久化问题

核心思路 #

问题根源是APP启动时同步渲染页面，但用户类型数据是从Firebase异步获取的，导致company用户的类型还没拿到就触发了页面跳转。解决的关键是在启动流程中加入异步等待，确保拿到用户类型后再决定加载哪个页面。

具体实现步骤 #

1. 改造APP入口的初始化逻辑 #

把原本直接返回首页的代码，改成先监听Firebase用户状态，同时获取用户类型：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _userType;
  bool _isLoaded = false;

  @override
  void initState() {
    super.initState();
    _checkAuthAndUserType();
  }

  Future<void> _checkAuthAndUserType() async {
    FirebaseAuth.instance.authStateChanges().listen((user) async {
      if (user != null) {
        // 从Firebase（比如Firestore）获取用户类型
        DocumentSnapshot userDoc = await FirebaseFirestore.instance
            .collection('users')
            .doc(user.uid)
            .get();
        setState(() {
          _userType = userDoc['type']; // 假设字段名为type，值为'client'或'company'
          _isLoaded = true;
        });
      } else {
        setState(() {
          _userType = null;
          _isLoaded = true;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // 未加载完成时显示加载页
    if (!_isLoaded) {
      return const MaterialApp(
        home: Scaffold(
          body: Center(child: CircularProgressIndicator()),
        ),
      );
    }

    // 加载完成后根据用户类型跳转对应页面
    return MaterialApp(
      home: _userType == null
          ? const LoginPage() // 未登录时显示登录页
          : _userType == 'client'
              ? const ClientHomePage()
              : const CompanyHomePage(),
    );
  }
}

2. 优化用户类型获取的可靠性 #

加入错误处理，避免获取用户类型失败导致页面卡住：

Future<void> _checkAuthAndUserType() async {
  FirebaseAuth.instance.authStateChanges().listen((user) async {
    if (user != null) {
      try {
        DocumentSnapshot userDoc = await FirebaseFirestore.instance
            .collection('users')
            .doc(user.uid)
            .get();
        if (userDoc.exists && userDoc.data() != null) {
          setState(() {
            _userType = userDoc['type'];
            _isLoaded = true;
          });
        } else {
          // 用户文档不存在，跳转到注册补全页或登录页
          setState(() {
            _userType = null;
            _isLoaded = true;
          });
        }
      } catch (e) {
        debugPrint('获取用户类型失败: $e');
        setState(() {
          _userType = null;
          _isLoaded = true;
        });
      }
    } else {
      setState(() {
        _userType = null;
        _isLoaded = true;
      });
    }
  });
}

3. 额外优化：缓存用户类型 #

用SharedPreferences缓存用户类型，避免每次启动都从Firestore获取：

import 'package:shared_preferences/shared_preferences.dart';

Future<void> _checkAuthAndUserType() async {
  final prefs = await SharedPreferences.getInstance();
  String? cachedType = prefs.getString('user_type');
  
  FirebaseAuth.instance.authStateChanges().listen((user) async {
    if (user != null) {
      try {
        DocumentSnapshot userDoc = await FirebaseFirestore.instance
            .collection('users')
            .doc(user.uid)
            .get();
        String serverType = userDoc['type'];
        await prefs.setString('user_type', serverType);
        setState(() {
          _userType = serverType;
          _isLoaded = true;
        });
      } catch (e) {
        // 获取失败时用缓存的类型
        setState(() {
          _userType = cachedType;
          _isLoaded = true;
        });
      }
    } else {
      await prefs.remove('user_type');
      setState(() {
        _userType = null;
        _isLoaded = true;
      });
    }
  });
}

为什么之前client正常？ #

大概率是client的用户类型获取速度更快（比如缓存命中、网络延迟低），刚好赶在页面渲染前完成，但company的情况因为某种原因（比如数据加载慢、网络波动）导致异步操作滞后，页面已经开始渲染才拿到数据，引发错误。通过统一等待加载完成再渲染页面，就能解决两类用户的一致性问题。

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