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

Question

总结：我是 Flutter 和 Dart 的新手，我正在尝试为自己创建一种关于如何执行登录和保护我的应用程序页面的练习。

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

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

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

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

欢迎任何意见或良好的阅读。

谢谢，如果我的问题不太好，我恳请您帮助我改进它。

标签： node.jsexpressflutterdart

Answer 1

有一步一步登录 BLoC 教程https://bloclibrary.dev/#/flutterlogintutorial?id=setup
还有 Weather , ToDo , Firebase login, Timer 你可以参考
这个教程使用包flutter_bloc并有完整的代码

Login 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();
          }
        },
      ),
    );
  }
}