页面刷新后 Firebase 身份验证中存在持久会话的 Flutter Web 问题

Question

我最近将 Flutter SDK 升级到了 v3.0.5，并为 Flutter Web 构建了一个登录界面，使用电子邮件将其与 Firebase 身份验证连接起来。登录、注销和注册均成功运行（即路由到正确的页面）。

但是在登录时，以及在调试期间刷新网页/热重载时，会话会丢失并且页面路由回登录页面。

我尝试使用这两种方法检查当前用户是否为空：

方法一：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    User? user = FirebaseAuth.instance.currentUser;

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: user == null ? LoginPage() : HomePage(),
    );
  }
}

方法二：

class _LoginPageState extends State<LoginPage> {
  TextEditingController? emailText = TextEditingController();
  TextEditingController? passwordText = TextEditingController();
  User? user = FirebaseAuth.instance.currentUser;

  @override
  void initState() {
    super.initState();
    FirebaseAuth.instance.authStateChanges().listen((user) {
      if (user != null) {
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => HomePage(),
            ));
      }
    });
  }

还尝试使用 Firebase 持久会话方法，但不确定这是否是从 onPressed 按钮调用它的正确方法：

      ElevatedButton(
        child: Text('Login'),
        onPressed: () async {
          try {
            await FirebaseAuth.instance
                .signInWithEmailAndPassword(
                    email: emailText!.text,
                    password: passwordText!.text)
                .then((value) async {
              await FirebaseAuth.instance
                  .setPersistence(Persistence.SESSION)
                  .then((_) async {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => HomePage(),
                    ));
              });
            });
          } on FirebaseAuthException catch (e) {
            print(e.message.toString());
          } catch (e) {
            print(e.toString());
          }
        },
      ),

但是以上方法都不起作用。

另外，我还遇到了Firebase.initializeApp刷新后抛出异常，与

有关

“FirebaseError：Firebase：未创建 Firebase 应用程序“[DEFAULT]”

• 调用 Firebase App.initializeApp()（应用/无应用）。

Firebase 的安装也类似于 main.dart 和 index.html 中文档中提到的步骤。

注意：我在去年工作的上一个项目中复制了相同的代码，该项目运行良好，没有任何问题。

Answer 1

对我有用的修复是确保在调试时使用：

flutter run -d chrome --web-port=50000

（或任何你喜欢的端口）。

默认情况下，Web 应用程序将清除运行之间的所有数据，添加端口会阻止此操作。 （也许端口是随机生成的，并且数据被锁定到该端口）

您还应该确保它不是异步问题并使用：

final user = await FirebaseAuth.instance.authStateChanges().first;

而不是仅仅尝试获取可能没有机会填充的用户属性（

FirebaseAuth.instance.currentUser

）。

Answer 2

您是否尝试过将软件包更新到最新版本？

根据这个答案，这些版本解决了问题：

firebase_core: ^1.20.0 firebase_auth: ^3.6.0 cloud_firestore: ^3.4.1

Answer 3

为此目的使用 flutter web 的命名路由，因为它们是控制此类行为的有效方法，下面是一个示例，以便您可以有一个想法

通过在刷新时使用此功能，您将不会遇到此类问题谢谢

返回 GetMaterialApp( 主题：MyThemes.lightTheme， debugShowCheckedModeBanner：假， themeMode: themeProvider.themeMode, 初始路由: '/LoginScreen', 路线：{ '/LoginScreen': (上下文) => const LoginScreen(), '/DashboardScreens': (上下文) => const DashboardScreens(), }, );