Flutter login system using BLoC pattern

问题

Summary: I'm very new on Flutter and Dart and I'm trying to create a kind of exercise for myself about how to perform a login and protect my app pages.

My goal asking this question is to understand about the best practices to protect, login and logout from my Flutter app.

I've performed a lot of research about the architectures and patterns available and I've read about the BLoC pattern but I still have difficult to understand how it works.

If someone could help me with some explanation about how can I deal with the app sessions (when I have a JWT for example returned from my NodeJS backend), how can I store them and share their state among the pages of my application and if I have a successfully login how can I detect this new session and push my user to a new page?

What I've tried: I've implemented some StreamControllers on a kind of "discovering" on Flutter but I don't have a relevant code to place here.

Any input or good reading are welcome.

Thanks and if my question was not so good, I kindly ask for you to help me to improve it.

回答1:

There is a step by step login BLoC Tutorial https://bloclibrary.dev/#/flutterlogintutorial?id=setup
And also Weather , ToDo , Firebase login, Timer you can reference
This Tutorial use package flutter_bloc and have complete code

code snippet for 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();
          }
        },
      ),
    );
  }
}

来源：https://stackoverflow.com/questions/59061820/flutter-login-system-using-bloc-pattern

标签

node.js

express

Flutter

dart