Flutter 路由攔截

這是一篇入門級教程，更適用於小型項目。

一. 爲何須要路由攔截

假如咱們想在用戶沒有登陸的時候自動跳轉到登陸頁面，在登陸的時候能夠正常瀏覽其餘頁面。這樣每一次打開頁面的時候都去判斷登陸狀態很是麻煩，咱們能夠利用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.