> 文档中心 > Flutter路由守卫拦截

Flutter路由守卫拦截

在这里插入图片描述

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

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

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

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

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

关于路由基础相关知识请查看Flutter Navigator路由传参_WEB前端李志杰的博客-CSDN博客_navigator怎么传参

一、路右表管理

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

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

/// lib/router/index.dartimport '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 routeList={  "notFound":(content) =>const NotFound(),  "login":(content) =>const LoginPage(),  "main":(content) =>const MainPage(),};

二、实现路由守卫

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

final GlobalKey navigatorKey = GlobalKey();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内容:

一、半天时间掌握Dart开发语言-基础学习

二、半天时间掌握Dart开发语言-类的学习

三、【Flutter开发环境搭建】Java SDK安装

四、【Flutter开发环境搭建】Android SDK、Dart SDK及Flutter SDK安装_

五、Flutter路由传参

六、flutter全局状态管理Provider

七、Flutter自定义iconfont字体图标

八、Flutter网络请求Dio库的使用及封装

九、Flutter RSA加密解密