Flutter路由守衛(wèi)攔截的實現(xiàn)

更新時間：2022年04月22日 09:34:06 作者：WEB前端李志杰

路由守衛(wèi)攔截最常見的應(yīng)用場景就是對用戶數(shù)據(jù)權(quán)限的校驗，本文主要介紹了Flutter路由守衛(wèi)攔截的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

為什么要使用路由

在之前我們的代碼中，頁面跳轉(zhuǎn)使用的代碼如下所示：

Navigator.of(context).push(
  MaterialPageRoute(builder: (context) =&gt; LoginPage()),
);

在開發(fā)過程中，隨著頁面的增加，如果繼續(xù)使用這種方式會有如下缺陷：

代碼耦合嚴重：涉及到頁面跳轉(zhuǎn)的地方就需要插入頁面的構(gòu)造函數(shù)，意味著需要知道其他頁面的構(gòu)建方式。
不易維護：一旦某個頁面發(fā)生了變化，需要將涉及到該頁面的跳轉(zhuǎn)全部改變。
權(quán)限控制不方便：假設(shè)某些頁面需要授權(quán)后才可以訪問，需要在各個地方插入權(quán)限判斷。

Flutter路由守衛(wèi)攔截的實現(xiàn)

路由守衛(wèi)攔截最常見的應(yīng)用場景就是對用戶數(shù)據(jù)權(quán)限的校驗（用戶是否是登錄狀態(tài)，404頁面跳轉(zhuǎn)……）。

在Flutter中可以通過MaterialAppWedgit中的onGenerateRoute屬性實現(xiàn)路由守衛(wèi)。

在Flutter實現(xiàn)路由守衛(wèi)攔截時需注意：

1、onGenerateRoute只針對命名路由有效；

2、onGenerateRoute注冊在路由表之中的路由無法監(jiān)聽到。

關(guān)于路由基礎(chǔ)相關(guān)知識請查看Flutter Navigator路由傳參

一、路右表管理

在lib/router/index.dart中統(tǒng)一管理路由表數(shù)據(jù)。

由于onGenerateRoute無法監(jiān)聽路由表中已經(jīng)注冊的路由，因此，我們需要通過initialRoute 屬性指定應(yīng)用程序的默認頁面，千萬不要在注冊路由表的時候使用/去指定應(yīng)用程序默認頁面。

/// lib/router/index.dart
import 'package:cyber_security/view/login/index.dart';
import 'package:cyber_security/view/main/index.dart';
import 'package:cyber_security/view/not_found/index.dart';
import 'package:flutter/material.dart';

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

二、實現(xiàn)路由守衛(wèi)

在路由守衛(wèi)中我們可以監(jiān)聽跳轉(zhuǎn)未定義的頁面至404頁面，實現(xiàn)用戶數(shù)據(jù)權(quán)限的校驗等業(yè)務(wù)邏輯。

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', // 默認進入的頁面
        onGenerateRoute: _routeGenerator);
  }
  /// 實現(xiàn)路由守衛(wèi)
  Route _routeGenerator(RouteSettings settings) {
    final name = settings.name;
    var builder = routeList[name];
    // 如果路由表中未定義，跳轉(zhuǎn)到未定義路由頁面
    builder ??= (content) => const NotFound();
    // 用戶權(quán)限認證的邏輯處理
    ……
    // 構(gòu)建動態(tài)的route
    final route = MaterialPageRoute(
      builder: builder,
      settings: settings,
    );
    return route;
  }
}

到此這篇關(guān)于Flutter路由守衛(wèi)攔截的實現(xiàn)的文章就介紹到這了,更多相關(guān)Flutter路由守衛(wèi)攔截內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: