Flutter 路由拦截

这是一篇入门级教程，更适用于小型项目，

并且采用的是 Navigator 1.0。

一. 为什么需要路由拦截

假如我们想在用户没有登录的时候自动跳转到登录页面，在登录的时候可以正常浏览其他页面。这样每一次打开页面的时候都去判断登录状态非常麻烦，我们可以利用MaterialApp的onGenerateRoute属性。

二. onGenerateRoute 介绍

• onGenerateRoute只会对命名路由生效
• onGenerateRoute属性，它在打开命名路由时可能会被调用
• 如果指定的路由名在路由表中已注册，则会调用路由表中的builder函数来生成路由组件
• 如果路由表中没有注册，才会调用onGenerateRoute来生成路由

三. 准备工作

根据上面 onGenerateRoute 的介绍，我们必须做如下处理：

MaterialApp(
    // home: MyHomePage(),
    // routes: routes,
    initialRoute: "index",
    onGenerateRoute: onGenerateRoute,
);

• 删除路由表 routes
• 删除 home
• 使用 initialRoute

四. 建立 onGenerateRoute 函数

Route<dynamic> onGenerateRoute(RouteSettings settings) {
    String routeName;
    routeName = routeBeforeHook(settings);
    return MaterialPageRoute(builder: (context) {
      /// 注意：如果路由的形式为: '/a/b/c'
      /// 那么将依次检索 '/' -> '/a' -> '/a/b' -> '/a/b/c'
      /// 所以，我这里的路由命名避免使用 '/xxx' 形式
      switch (routeName) {
        case "index":
          return MyHomePage();
        case "login":
          return LoginScreen();
        default:
          return Scaffold(
            body: Center(
              child: Text("页面不存在"),
            ),
          );
      }
    });
  }

到这里我们只是实现了路由名称 --> 具体的页面的映射，下面还要实现“路由钩子”，用来实现拦截功能。

五. 实现拦截功能

建立 routeBeforeHook 函数，并在 onGenerateRoute 函数中调用

String routeBeforeHook(RouteSettings settings) {
    /// Global.prefs 是全局的 SharedPreferences 实例
    /// SharedPreferences 是常用的本地存储的插件
    final token = Global.prefs.getString('token') ?? '';
    if (token != '') {
      if (settings.name == 'login') {
        return 'index';
      }
      return settings.name;
    }
    return 'login';
  }

六. 最后

不要吝啬各位手里的赞啊！

End.