Flutter如何完成路由攔截,實現權限管理

Posted on by

之前幾篇介紹瞭 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 路由攔截的資料請關註WalkonNet其它相關文章！

推薦閱讀：