Straight to work, no why ~

Based on the previous article to achieve a login page, using Connectivity, shared_preferences, Dio to achieve a complete login operation, including network connection detection, request, data storage, etc

Of course, the login interface is not my implementation, is provided by playing Android friendship. First look at the effect:

Plug-in profile

connectivity

Used to discover and configure network connections. It can distinguish between cellular and WiFi connections, for iOS and Android.

Note that on Android, connectivity to the Internet is not guaranteed

shared_preferences

Wrap NSUserDefaults (on iOS) and SharedPreferences (on Android) to provide persistent storage for simple data.

Dio

Dio is a powerful Dart Http request library with support for Restful apis, FormData, interceptors, request cancellation, Cookie management, file upload/download, timeouts, custom adapters, and more.

Depend on the configuration

Add a plug-in dependency to pubspec.yaml, and the plug-in version below is the latest version at the time this article was written.

  dependencies:
  # https://github.com/flutterchina/dio
  dio: ^3.03.
  
  # https://github.com/flutter/plugins/tree/master/packages/connectivity
  connectivity: ^0.44.
  
  # https://github.com/flutter/plugins/tree/master/packages/shared_preferences
  shared_preferences: ^0.53.+4
Copy the code

The login operation

All operations today are based on the previous implementation of a landing page, if necessary, you can jump to the past to view.

Build the login request using Dio

Replaced with _doLogin() in the onPressed callback of the login button as follows:

  Future _doLogin() async{ Dio dio = Dio(); dio.options.. baseUrl ='https://www.wanandroid.com/';

    // Add interceptordio.interceptors .. add(LogInterceptor( requestHeader:true,
        requestBody: true,
        responseHeader: true,
        responseBody: true));// Initiate a request
    Response response = await dio.post('user/login',
        data: FormData.fromMap({
          "username": _accountController.text.trim(),
          "password": _pwdController.text.trim(),
        }));

    if (response.statusCode == 200) {
      UserEntity user = UserEntity.fromJson(response.data);
      if (user.errorCode == 0) {
        _showInfoDialog('Login successful');
      } else {
        _showInfoDialog('Login failed:${user.errorMsg}'); }}else {
      _showInfoDialog('Network request exception:${response.statusMessage}'); }}Copy the code

Click login, the account password is correct, you will see login success!

Check the network before initiating the request

Before making an Internet request, we usually check the network. If there is an Internet, we can make an Internet request. There is one more caveat to this library on Android.

Verify network connection detection by adding the following code before post:

    // Check the network connection
    var connectivityResult = await (Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.none) {
      _showInfoDialog('Network connection exception');
      return;
    }
Copy the code

Storing login results

Generally, after a successful login, we save the user information for easy access in subsequent operations.

Therefore, after confirming the successful login, add the following code to save the user information:

    // Save the information after successful login
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString('user', jsonEncode(user.data));
Copy the code

Connectivity, shared_preferences plug-ins are relatively simple to use, no more nonsense. At this point, if the network connection is normal and the account password is correct, you will see the first graphic above. Otherwise:

The interceptor adds the request header

Once you have logged in successfully, then you need to add tokens to all requests, possibly with some hardware information. This is done by adding a Dio interceptor:

    // Add interceptordio.interceptors .. add(InterceptorsWrapper( onRequest: (RequestOptions options)async {
          var prefs = await SharedPreferences.getInstance();
          var userJson = prefs.getString('user');
          if(userJson ! =null&& userJson.isNotEmpty) { UserData user = UserData.fromJson(jsonDecode(userJson)); options.headers .. addAll({'userId': user.id ?? ' '.'token': user.token ?? ' '}); }returnoptions; },))Copy the code

So the network request will be blocked, add userId and token…

Request prompt

Generally, when making network requests or time-consuming operations, the user is given a friendly reminder that we are not stuck. ShowDialog () displays a Widget that wraps a LoadingDialog.

At the end

This login practice is relatively simple, with no uniform encapsulation of requests and no exception handling. It is generally processed unified after encapsulation, and the place to call is much simpler.

And finally all the code in the _doLogin method,

  Future _doLogin() async{ Dio dio = Dio(); dio.options.. baseUrl ='https://www.wanandroid.com/';

    // Add interceptordio.interceptors .. add(InterceptorsWrapper( onRequest: (RequestOptions options)async {
          var prefs = await SharedPreferences.getInstance();
          var userJson = prefs.getString('user');
          if(userJson ! =null&& userJson.isNotEmpty) { UserData user = UserData.fromJson(jsonDecode(userJson)); options.headers .. addAll({'userId': user.id ?? ' '.'token': user.token ?? ' '}); }returnoptions; },)).. add(LogInterceptor( requestHeader:true,
        requestBody: true,
        responseHeader: true,
        responseBody: true));// Check the network connection
    var connectivityResult = await (Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.none) {
      _showInfoDialog('Network connection exception');
      return;
    }

    LoadingDialog.show(context);

    // Initiate a request
    Response response = await dio.post('user/login',
        data: FormData.fromMap({
          "username": _accountController.text.trim(),
          "password": _pwdController.text.trim(),
        }));

    if (response.statusCode == 200) {
      UserEntity user = UserEntity.fromJson(response.data);
      if (user.errorCode == 0) {
        // Save the information after successful login
        SharedPreferences prefs = await SharedPreferences.getInstance();
        prefs.setString('user', jsonEncode(user.data));
        _showInfoDialog('Login successful');
      } else {
        _showInfoDialog('Login failed:${user.errorMsg}'); }}else {
      _showInfoDialog('Network request exception:${response.statusMessage}');
    }
    LoadingDialog.hide(context);
  }
Copy the code

Finally, attach Github address: github.com/joker-fu/fl…