快捷導(dǎo)航

Flutter如何完成路由攔截,實(shí)現(xiàn)權(quán)限管理

更新時(shí)間：2021年06月22日 10:25:15 作者：島上碼農(nóng)

本篇介紹了利用 Fluro 路由管理實(shí)現(xiàn)路由權(quán)限攔截的兩種方式，兩種方式各有好處，使用過(guò)程中可以根據(jù)實(shí)際情況決定使用哪一種方法。

fluro 路由攔截思路

fluro 本身并沒(méi)有提供類似 Flutter 自帶的 onGenerateRoute方法來(lái)在每次跳轉(zhuǎn)時(shí)進(jìn)行路由攔截響應(yīng)。我們可以通過(guò)兩種方式實(shí)現(xiàn)路由攔截，一是在定義路由的時(shí)候，對(duì)于未授權(quán)的路由地址跳轉(zhuǎn)到403未授權(quán)頁(yè)面；二是繼承 FluroRouter 類，重寫(xiě)其中的部分方法。通過(guò)閱讀源碼可以發(fā)現(xiàn)可以在子類覆蓋 navigateTo 方法來(lái)進(jìn)行路由攔截。

定義路由時(shí)攔截

這種方式比較簡(jiǎn)單，首先需要使用 Map定義一個(gè)路由表，將路由路徑對(duì)應(yīng)的路由處理器做一個(gè)映射，以便在定義路由的時(shí)候?qū)⒙酚陕窂脚c授權(quán)路由表進(jìn)行比較，若在授權(quán)路由表內(nèi)，則正常定義路由；否則使用403未授權(quán)頁(yè)面替換。代碼如下所示：

//完整路由表
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();
  }),
};

//未授權(quán)頁(yè)面處理器
static final permissionDeniedHandler =
    Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
  return PermissionDenied();
});

//定義路由
//添加路由時(shí)，將路由路徑與白名單進(jìn)行比對(duì)
//若不在白名單內(nèi)，則使用未授權(quán)路由處理器
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();
  });
}

這種方式實(shí)現(xiàn)起來(lái)簡(jiǎn)單，但是為了保證路由攔截有效，必須在初始化路由前就通過(guò)登錄人信息拿到路由白名單。為了改善用戶體驗(yàn)，可以預(yù)先明確哪些頁(yè)面不涉及權(quán)限管控（如閃屏頁(yè)，首頁(yè)，登錄頁(yè)），將這些頁(yè)面直接添加。

跳轉(zhuǎn)時(shí)攔截

跳轉(zhuǎn)時(shí)攔截需要另外定義 FluroRouter 的子類，通過(guò)覆蓋navigatoTo方法來(lái)實(shí)現(xiàn)路由攔截。這里有點(diǎn)特殊的是，由于路由跳轉(zhuǎn)時(shí)的路徑可能攜帶參數(shù)，不能像定義路由攔截那樣直接和白名單進(jìn)行比對(duì)。但是可以定義一個(gè)路由路徑匹配方法來(lái)判斷當(dāng)前路由和白名單的是否匹配決定是否要做權(quán)限攔截。

fluro 既然能夠按路徑路由肯定提供了對(duì)應(yīng)的路由路徑匹配方法，扒一下源碼，可以發(fā)現(xiàn)有一個(gè)match方法用于匹配路由路徑。如果匹配成功，則返回匹配的路由對(duì)象AppRouteMatch，如果沒(méi)有匹配到則返回 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類有一個(gè)AppRoute類 route屬性，route屬性下還有一個(gè) 字符串類型的route屬性，即匹配到的路由路徑。

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

因此可以通過(guò)該方式來(lái)檢測(cè)是否和白名單的路由匹配，如果不匹配就調(diào)到403頁(yè)面。我們定義了一個(gè)FluroRouter 的子類PermissionRouter，有兩個(gè)屬性，分別是白名單列表_whiteList 和403頁(yè)面路由地址 _permissionDeniedPath。在覆蓋的 navigateTo方法中通過(guò)路由路徑匹配方式來(lái)決定是否進(jìn)行路由攔截。

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) {
      //設(shè)置了白名單且當(dāng)前路由不在白名單內(nèi)，更改路由路徑到授權(quán)被拒絕頁(yè)面
      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);
  }
}

這種方式需要首先定義好全部路由對(duì)應(yīng)的路由處理器，然后在跳轉(zhuǎn)時(shí)再攔截。因此假設(shè)首頁(yè)是不涉及授權(quán)的，可以在 App 啟動(dòng)后再獲取授權(quán)白名單，而不需要在啟動(dòng)時(shí)獲取，可以降低啟動(dòng)時(shí)的任務(wù)，加快啟動(dòng)速度和提高用戶體驗(yàn)。

以上就是Flutter如何完成路由攔截,實(shí)現(xiàn)權(quán)限管理的詳細(xì)內(nèi)容，更多關(guān)于Flutter 路由攔截的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: