Flutter 路由拦截 Flutter怎样完成路由拦截,实现权限管理
岛上码农 人气:0之前几篇介绍了 fluro 的路由管理和转场动画，本篇介绍如何完成路由拦截，进而实现权限管理。“此路是我开，此树是我栽。若是没权限，403到来！”
相关文章
若想了解 flutter 的路由相关篇章，请查阅下面的篇章：
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 启动后再获取授权白名单，而不需要在启动时获取，可以降低启动时的任务，加快启动速度和提高用户体验。
加载全部内容