Flutter如何完成路由拦截,实现权限管理

之前几篇介绍了 fluro 的路由管理和转场动画,本篇介绍如何完成路由拦截,进而实现权限管理。“此路是我开,此树是我栽。若是没权限,403到来!”

相关文章

若想了解 flutter 的路由相关篇章,请查阅下面的篇章:

//www.jb51.net/article/215167.htm

//www.jb51.net/article/214856.htm

//www.jb51.net/article/215564.htm

//www.jb51.net/article/215549.htm

//www.jb51.net/article/215569.htm

fluro 路由拦截思路

fluro 本身并没有提供类似 Flutter 自带的 onGenerateRoute方法来在每次跳转时进行路由拦截响应。我们可以通过两种方式实现路由拦截,一是在定义路由的时候,对于未授权的路由地址跳转到403未授权页面;二是继承 FluroRouter 类,重写其中的部分方法。通过阅读源码可以发现可以在子类覆盖 navigateTo 方法来进行路由拦截。

定义路由时拦截

这种方式比较简单,首先需要使用 Map定义一个路由表,将路由路径对应的路由处理器做一个映射,以便在定义路由的时候将路由路径与授权路由表进行比较,若在授权路由表内,则正常定义路由;否则使用403未授权页面替换。代码如下所示:

//完整路由表
static final routeTable = {
  loginPath: Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return LoginPage();
  }),
  dynamicDetailPath: Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return DynamicDetailPage(params['id'][0]);
  }),
  splashPath: Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return Splash();
  }),
  transitionPath: Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return TransitionPage();
  }),
  homePath: Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return AppHomePage();
  }),
};

//未授权页面处理器
static final permissionDeniedHandler =
    Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
  return PermissionDenied();
});

//定义路由
//添加路由时,将路由路径与白名单进行比对
//若不在白名单内,则使用未授权路由处理器
static void defineRoutes({List<String> whiteList}) {
  routeTable.forEach((path, handler) {
    if (whiteList == null || whiteList.contains(path)) {
      router.define(path, handler: handler);
    } else {
      router.define(path,
          handler: permissionDeniedHandler,
          transitionType: TransitionType.material);
    }
  });

  router.notFoundHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return NotFound();
  });
}

这种方式实现起来简单,但是为了保证路由拦截有效,必须在初始化路由前就通过登录人信息拿到路由白名单。为了改善用户体验,可以预先明确哪些页面不涉及权限管控(如闪屏页,首页,登录页),将这些页面直接添加。

跳转时拦截

跳转时拦截需要另外定义 FluroRouter 的子类,通过覆盖navigatoTo方法来实现路由拦截。这里有点特殊的是,由于路由跳转时的路径可能携带参数,不能像定义路由拦截那样直接和白名单进行比对。但是可以定义一个路由路径匹配方法来判断当前路由和白名单的是否匹配决定是否要做权限拦截。

fluro 既然能够按路径路由肯定提供了对应的路由路径匹配方法,扒一下源码,可以发现有一个match方法用于匹配路由路径。如果匹配成功,则返回匹配的路由对象AppRouteMatch,如果没有匹配到则返回 null。

/// Finds a defined [AppRoute] for the path value.
/// If no [AppRoute] definition was found
/// then function will return null.
AppRouteMatch? match(String path) {
  return _routeTree.matchRoute(path);
}

AppRouteMatch类有一个AppRoute类 route属性,route属性下还有一个 字符串类型的route属性,即匹配到的路由路径。

class AppRoute {
  String route;
  dynamic handler;
  TransitionType? transitionType;
  Duration? transitionDuration;
  RouteTransitionsBuilder? transitionBuilder;
  AppRoute(this.route, this.handler,
      {this.transitionType, this.transitionDuration, this.transitionBuilder});
}

因此可以通过该方式来检测是否和白名单的路由匹配,如果不匹配就调到403页面。我们定义了一个FluroRouter 的子类PermissionRouter,有两个属性,分别是 白名单列表_whiteList 和403页面路由地址 _permissionDeniedPath。在覆盖的 navigateTo方法中通过路由路径匹配方式来决定是否进行路由拦截。

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';

class PermissionRouter extends FluroRouter {
  List<String> _whiteList;
  set whiteList(value) => _whiteList = value;

  String _permissionDeniedPath;
  set permissionDeniedPath(value) => _permissionDeniedPath = value;

  @override
  Future navigateTo(
    BuildContext context,
    String path, {
    bool replace = false,
    bool clearStack = false,
    bool maintainState = true,
    bool rootNavigator = false,
    TransitionType transition,
    Duration transitionDuration,
    transitionBuilder,
    RouteSettings routeSettings,
  }) {
    String pathToNavigate = path;
    AppRouteMatch routeMatched = this.match(path);
    String routePathMatched = routeMatched?.route?.route;
    if (routePathMatched != null) {
      //设置了白名单且当前路由不在白名单内,更改路由路径到授权被拒绝页面
      if (_whiteList != null && !_whiteList.contains(routePathMatched)) {
        pathToNavigate = _permissionDeniedPath;
      }
    }
    return super.navigateTo(context, pathToNavigate,
        replace: replace,
        clearStack: clearStack,
        maintainState: maintainState,
        rootNavigator: rootNavigator,
        transition: transition,
        transitionDuration: transitionDuration,
        transitionBuilder: transitionBuilder,
        routeSettings: routeSettings);
  }
}

这种方式需要首先定义好全部路由对应的路由处理器,然后在跳转时再拦截。因此假设首页是不涉及授权的,可以在 App 启动后再获取授权白名单,而不需要在启动时获取,可以降低启动时的任务,加快启动速度和提高用户体验。

以上就是Flutter如何完成路由拦截,实现权限管理的详细内容,更多关于Flutter 路由拦截的资料请关注我们其它相关文章!

(0)

相关推荐

  • Flutter 利用CustomScrollView实现滑动效果

    我们在之前的文章中//www.jb51.net/article/213709.htm 使用了 ListView 将几个 GridView 组合在一起实现滑动效果,今天利用CustomScrollView改造一下代码 CustomScrollView 简介 CustomScrollView的常用属性如下: slivers:最重要的属性,由多个SliverXX组件组成的数组,包括如 SliverList(对应 ListView),SliverGrid(对应 GridView)等,如果普通组件无法直接

  • Flutter开发中的路由参数处理

    目录 Navigator 的 push 和 pop方法 Navigator 导航器的 push 和 pop 方法可以携带参数在页面间传递,其他变形的方法也一样.pushNamed 方法原型如下: Future<T?> pushNamed<T extends Object?>( String routeName, { Object? arguments, }) { return push<T>(_routeNamed<T>(routeName, argumen

  • Flutter 用自定义转场动画实现页面切换

    fluro 转场动画源码 在使用自定义转场动画前,先扒一扒 fluro 的源码,通过源码可以发现这么一个标准的转场方法: RouteTransitionsBuilder _standardTransitionsBuilder( TransitionType? transitionType) { return (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation

  • Flutter 生成图片保存至相册的示例

    目录 基本思路 添加依赖 实现代码 遇到一个需求,需要用 Flutter 生成图片,最终实现的效果如下: 基本思路 使用 Canvas 绘制图片中各元素,然后使用 PictureRecorder 进行记录生成. 添加依赖 qr_flutter: ^3.1.0 image_gallery_saver: ^1.2.2 fluttertoast: ^4.0.0 实现代码 import 'dart:ui' as ui; import 'dart:ui'; import 'package:flutter/

  • Flutter 使用fluro的转场动画进行页面切换

    在 fluro 中,定义路由处理器 Handler 时可以指定该页面的默认转场形式,或者在使用 navigateTo 方法是可以设置页面跳转transition参数来设定个性化的转场形式.本篇演示了fluro 内置的转场动画,效果如下图所示. 转场形式 fluro 的转场形式通过 TransitionType枚举定义,如下所示: enum TransitionType { native, //原生形式,和原生的保持一致,默认 nativeModal, //原生模态跳转 inFromLeft, /

  • Flutter 底部弹窗ModelBottomSheet的使用示例

    实现效果 最终实现效果如图片所示,分布演示了基础的,全屏的和自定义的底部弹窗形式. 代码结构 在消息页面 message.dart 中,使用 Column 组件构建了三个按钮,点击每个按钮调用不同的底部弹窗显示.这部分代码不展示,核心注意的方式是按钮的 onPressed 响应方法,需要使用 async 修饰,这是因为 ModalBottomSheet 的返回结果是一个 Future 对象,需要通过 await 来获取返回结果. onPressed: () async { int selecte

  • Flutter app页面路由以及路由拦截的实现

    为什么要使用路由 在之前我们的代码中,页面跳转使用的代码如下所示: Navigator.of(context).push( MaterialPageRoute(builder: (context) => LoginPage()), ); 在开发过程中,随着页面的增加,如果继续使用这种方式会有如下缺陷: 代码耦合严重:涉及到页面跳转的地方就需要插入页面的构造函数,意味着需要知道其他页面的构建方式. 不易维护:一旦某个页面发生了变化,需要将涉及到该页面的跳转全部改变. 权限控制不方便:假设某些页面需

  • 如何在Flutter中嵌套Android布局

    效果 本文具体demo效果如下 开发 1.首先创建flutter项目,在项目中定义好flutter需要展示布局: @override Widget build(BuildContext context) { return Scaffold( body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Expanded( child: Center( child: Text( 'Android按钮

  • Flutter 底部弹窗如何实现多项选择

    多选和单选的不同之处 单选的时候,选中一个就可以直接把结果返回,因此本身底部弹窗无需状态管理.但到多选的时候,需要知道当前选中的选项,有选项被点击的时候需要存储下来,当再次被点击的时候要清空这个选项,同时界面还需要同步更新,因此就涉及到状态管理了. 实现方式 在Flutter 中提供了一个 StatefulBuilder 的类,提供了一个 builder方法构建有状态组件,并且提供了状态更新方法,因此在里面完成状态管理. StatefulBuilder(builder: (context1, s

  • Flutter 路由插件fluro的使用

    前面两篇文章我们介绍了Flutter 的原生导航器 Navigator 实现页面跳转,路由及路由拦截的使用,具体可以参考之前的文章: //www.jb51.net/article/215167.htm //www.jb51.net/article/214856.htm 使用原生的路由基本上能够满足大部分需求,但如果想要对页面做类似浏览器 url 那样的路由,或者控制页面跳转的转场动画,那么原生的路由需要做不少的改造.在 pub 上,有优秀的路由插件 fluro 解决这类问题. fluro的使用方

随机推荐