脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Flutter路由守卫拦截

Flutter路由守卫拦截的实现

 更新时间：2022年04月22日 09:34:06   作者：WEB前端李志杰  
路由守卫拦截最常见的应用场景就是对用户数据权限的校验，本文主要介绍了Flutter路由守卫拦截的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

为什么要使用路由

在之前我们的代码中，页面跳转使用的代码如下所示：

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

在开发过程中，随着页面的增加，如果继续使用这种方式会有如下缺陷：

  • 代码耦合严重：涉及到页面跳转的地方就需要插入页面的构造函数，意味着需要知道其他页面的构建方式。
  • 不易维护：一旦某个页面发生了变化，需要将涉及到该页面的跳转全部改变。
  • 权限控制不方便：假设某些页面需要授权后才可以访问，需要在各个地方插入权限判断。

Flutter路由守卫拦截的实现

路由守卫拦截最常见的应用场景就是对用户数据权限的校验（用户是否是登录状态，404页面跳转……）。

在Flutter中可以通过MaterialAppWedgit中的onGenerateRoute属性实现路由守卫。

在Flutter实现路由守卫拦截时需注意：

1、onGenerateRoute只针对命名路由有效；

2、onGenerateRoute注册在路由表之中的路由无法监听到。

关于路由基础相关知识请查看Flutter Navigator路由传参

一、路右表管理

在lib/router/index.dart中统一管理路由表数据。

由于onGenerateRoute无法监听路由表中已经注册的路由，因此，我们需要通过initialRoute 属性指定应用程序的默认页面，千万不要在注册路由表的时候使用/去指定应用程序默认页面。

/// 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(),
};

二、实现路由守卫

在路由守卫中我们可以监听跳转未定义的页面至404页面，实现用户数据权限的校验等业务逻辑。

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);
  }
  /// 实现路由守卫
  Route _routeGenerator(RouteSettings settings) {
    final name = settings.name;
    var builder = routeList[name];
    // 如果路由表中未定义，跳转到未定义路由页面
    builder ??= (content) => const NotFound();
    // 用户权限认证的逻辑处理
    ……
    // 构建动态的route
    final route = MaterialPageRoute(
      builder: builder,
      settings: settings,
    );
    return route;
  }
}

到此这篇关于Flutter路由守卫拦截的实现的文章就介绍到这了,更多相关Flutter路由守卫拦截内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论