Implementation of Flutter Router Guard Intercept

Why use routing

In our previous code, the code used for page jumping is as follows:

(context).push(
  MaterialPageRoute(builder: (context) => LoginPage()),
);

During the development process, as the page increases, if you continue to use this method, there will be the following defects:

• Serious code coupling: when the page jumps, the page constructor needs to be inserted, which means you need to know how other pages are built.
• Not easy to maintain: Once a page changes, all jumps involving that page need to be changed.
• Permission control is inconvenient: Assuming that some pages need to be authorized before accessing, permission judgments need to be inserted in various places.

Implementation of Flutter Router Guard Intercept

The most common application scenario for routing guard interception is to verify user data permissions (whether the user is logged in, 404 page jump...).

In Flutter, route guarding can be implemented through the onGenerateRoute property in MaterialAppWedgit.

Pay attention to when implementing route guard interception in Flutter:

1. OnGenerateRoute is only valid for named routes;

2. The route registered in the routing table cannot be listened to.

Please check the basic knowledge of routingFlutter Navigator routing parameters

1. Road Right Table Management

Manage routing table data uniformly in lib/router/.

Since onGenerateRoute cannot listen to routes registered in the routing table, we need to specify the default page of the application through the initialRoute property. Never use/specify the default page of the application when registering the routing table.

/// lib/router/
import 'package:cyber_security/view/login/';
import 'package:cyber_security/view/main/';
import 'package:cyber_security/view/not_found/';
import 'package:flutter/';

Map<String, WidgetBuilder> routeList={
  "notFound":(content) =>const NotFound(),
  "login":(content) =>const LoginPage(),
  "main":(content) =>const MainPage(),
};

2. Realize routing guard

In the routing guard, we can listen to jump to the undefined page to the 404 page to realize business logic such as verification of user data permissions.

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        key: navigatorKey,
        debugShowCheckedModeBanner: false,
        title: 'Flutter APP',
        initialRoute: 'login', // The default page to enter        onGenerateRoute: _routeGenerator);
  }
  /// Implement route guarding  Route _routeGenerator(RouteSettings settings) {
    final name = ;
    var builder = routeList[name];
    // If the routing table is not defined, jump to the undefined routing page    builder ??= (content) => const NotFound();
    // Logical processing of user permission authentication    ……
    // Build dynamic route    final route = MaterialPageRoute(
      builder: builder,
      settings: settings,
    );
    return route;
  }
}

This is the end of this article about the implementation of Flutter Router Guard Intercept. For more related Flutter Router Guard Intercept, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!