Flutter认证导航管理插件authen_navigation_bloc的使用

Flutter认证导航管理插件authen_navigation_bloc的使用

在本教程中，我们将详细介绍如何使用 authen_navigation_bloc 插件来管理认证和导航。通过以下步骤，你将能够实现一个简单的认证流程，并根据用户的登录状态导航到不同的页面。

示例代码

以下是一个完整的示例，展示了如何使用 authen_navigation_bloc 插件。

import 'package:flutter/material.dart';
import 'package:authen_navigation_bloc/authen_navigation_bloc.dart'; // 引入 authen_navigation_bloc 包

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthenticationWrapper(), // 使用 AuthenticationWrapper 来处理认证逻辑
    );
  }
}

// 认证包装器类
class AuthenticationWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<AuthenNavigationBloc>(
      create: (context) => AuthenNavigationBloc(),
      child: BlocBuilder<AuthenNavigationBloc, AuthenNavigationState>(
        builder: (context, state) {
          if (state is Authenticated) {
            return const HomePage(); // 用户已登录，导航到主页
          } else if (state is UnAuthenticated) {
            return const LoginPage(); // 用户未登录，导航到登录页
          } else {
            return const LoadingPage(); // 加载中
          }
        },
      ),
    );
  }
}

// 主页
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主页'),
      ),
      body: Center(
        child: Text('欢迎来到主页！'),
      ),
    );
  }
}

// 登录页
class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 模拟用户登录
            final bloc = BlocProvider.of<AuthenNavigationBloc>(context);
            bloc.add(AuthenticateEvent()); // 触发认证事件
          },
          child: Text('登录'),
        ),
      ),
    );
  }
}

// 加载页
class LoadingPage extends StatelessWidget {
  const LoadingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('加载中...'),
      ),
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

详细说明

1. 引入包 在你的项目中添加 authen_navigation_bloc 包。你可以在 pubspec.yaml 文件中添加依赖项：

   dependencies:
     flutter:
       sdk: flutter
     authen_navigation_bloc: ^1.0.0 # 请替换为实际版本号
   

2. 创建认证包装器 创建一个 AuthenticationWrapper 类，该类负责根据用户的认证状态（已认证或未认证）导航到相应的页面。

   class AuthenticationWrapper extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return BlocProvider<AuthenNavigationBloc>(
         create: (context) => AuthenNavigationBloc(),
         child: BlocBuilder<AuthenNavigationBloc, AuthenNavigationState>(
           builder: (context, state) {
             if (state is Authenticated) {
               return const HomePage();
             } else if (state is UnAuthenticated) {
               return const LoginPage();
             } else {
               return const LoadingPage();
             }
           },
         ),
       );
     }
   }
   

3. 创建主页和登录页 创建两个页面：主页 (HomePage) 和登录页 (LoginPage)。登录页包含一个按钮，点击按钮后触发认证事件。

   class LoginPage extends StatelessWidget {
     const LoginPage({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('登录页'),
         ),
         body: Center(
           child: ElevatedButton(
             onPressed: () {
               final bloc = BlocProvider.of<AuthenNavigationBloc>(context);
               bloc.add(AuthenticateEvent());
             },
             child: Text('登录'),
           ),
         ),
       );
     }
   }
   

4. 触发认证事件 在登录页中，当用户点击登录按钮时，调用 AuthenNavigationBloc 的 add 方法来触发认证事件。

   bloc.add(AuthenticateEvent());