node.js - 使用BLoC模式的Flutter登录系统

Question

摘要:我对Flutter和Dart还是陌生的，我正在尝试为自己创建一种有关如何执行登录并保护我的应用程序页面的练习。

我问这个问题的目的是了解有关保护，登录和注销Flutter应用程序的最佳实践。

我已经对可用的体系结构和模式进行了很多研究，并且已经阅读了BLoC模式，但是我仍然很难理解它是如何工作的。

如果有人可以帮助我解释一下如何处理应用程序 session (例如，当我从NodeJS后端返回JWT时)，如何存储它们并在应用程序页面之间共享它们的状态，以及成功登录后，如何检测该新 session 并将用户推送到新页面？

我已经尝试过:我已经在Flutter上的一种“发现”上实现了一些StreamControllers，但是这里没有相关的代码。

欢迎任何输入或良好的阅读。

谢谢，如果我的问题不是很好，我请您帮助我改善它。

Answer 1

有一个分步登录的BLoC教程https://bloclibrary.dev/#/flutterlogintutorial?id=setup
还有Weather，ToDo，Firebase登录，Timer您可以引用
本教程使用软件包flutter_bloc并具有完整的代码



登录BLoC的代码段

import 'package:flutter/material.dart';

import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:user_repository/user_repository.dart';

import 'package:flutter_login/authentication/authentication.dart';
import 'package:flutter_login/splash/splash.dart';
import 'package:flutter_login/login/login.dart';
import 'package:flutter_login/home/home.dart';
import 'package:flutter_login/common/common.dart';

class SimpleBlocDelegate extends BlocDelegate {
  @override
  void onEvent(Bloc bloc, Object event) {
    super.onEvent(bloc, event);
    print(event);
  }

  @override
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(bloc, transition);
    print(transition);
  }

  @override
  void onError(Bloc bloc, Object error, StackTrace stacktrace) {
    super.onError(bloc, error, stacktrace);
    print(error);
  }
}

void main() {
  BlocSupervisor.delegate = SimpleBlocDelegate();
  final userRepository = UserRepository();
  runApp(
    BlocProvider<AuthenticationBloc>(
      builder: (context) {
        return AuthenticationBloc(userRepository: userRepository)
          ..add(AppStarted());
      },
      child: App(userRepository: userRepository),
    ),
  );
}

class App extends StatelessWidget {
  final UserRepository userRepository;

  App({Key key, @required this.userRepository}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocBuilder<AuthenticationBloc, AuthenticationState>(
        builder: (context, state) {
          if (state is AuthenticationUninitialized) {
            return SplashPage();
          }
          if (state is AuthenticationAuthenticated) {
            return HomePage();
          }
          if (state is AuthenticationUnauthenticated) {
            return LoginPage(userRepository: userRepository);
          }
          if (state is AuthenticationLoading) {
            return LoadingIndicator();
          }
        },
      ),
    );
  }
}