Flutter 路由与 Firebase 身份验证相结合

Posted 2023-02-23

【中文标题】Flutter 路由与 Firebase 身份验证相结合

【英文标题】：Flutter routes in combination with Firebase Auth

【发布时间】：2021-06-04 22:11:42

【问题描述】：

我正在开发一个网络应用程序，并且对路由有疑问。 如何结合 Firebase Auth 进行路由？

在互联网上，我看到很多使用 AuthenticationWrapper 的示例。 如果您已登录，您将进入主页，如果您未登录，您将进入登录页面。 那部分有效。但在应用程序中我想制作更多路线。

我了解到（下面的示例 1）您可以在 MaterialApp 中创建路线。我有 试图完成这项工作，但没有成功。

如何结合 Firebase 身份验证进行路由，并且当用户未登录时，它会导航到登录页面？

我很想听听您对此问题的意见。提前致谢！

Main.dart：

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';


Future<void> main() async 
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());



class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MultiProvider(
        providers: [
          Provider<AuthenticationService>(
            create: (_) => AuthenticationService(FirebaseAuth.instance),
          ),
          StreamProvider(
            create: (context) =>
                context.read<AuthenticationService>().authStateChanges,
          )
        ],
        child: MaterialApp(
            title: 'Name of the app', 
            theme: ThemeData(
              primarySwatch: Colors.blue,
              visualDensity: VisualDensity.adaptivePlatformDensity,
            ),
            home: AuthenticationWrapper(),
        ));
  


class AuthenticationWrapper extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final firebaseUser = context.watch<User>();

    if (firebaseUser != null) 
      // Page after loggin in
      return HomePage(); 
    
    // Sign in page
    return SignInPage();
  

示例 1：

MaterialApp(
  // Start the app with the "/" named route. In this case, the app starts
  // on the FirstScreen widget.
  initialRoute: '/',
  routes: 
    // When navigating to the "/" route, build the FirstScreen widget.
    '/': (context) => FirstScreen(),
    // When navigating to the "/second" route, build the SecondScreen widget.
    '/second': (context) => SecondScreen(),
  ,
);

【问题讨论】：

你能详细说明一下吗？ （如何结合 Firebase Auth 进行路由，当用户未登录时，它会导航到登录页面？）

当您进入需要拥有帐户的页面时。但是您没有登录，它重定向到登录页面。 （先登录再看内容）

我想知道如何制作多条路线以及每次检查用户是否已登录。

【参考方案1】：

你可以做的是创建一个自定义函数，在你的应用中拥有你想要的所有可能性，当你想检查用户的状态时调用特定的函数

void _check(String username) 
      if(user has account) 
        if(loggedin) 
          Navigator.pushReplacementNamed(context, Home.id);
         else  //if not logged in
          Navigator.pushReplacementNamed(context, SignIn.id);
        
       else  // if dont have account
        Navigator.pushReplacementNamed(context, SignUP.id);