广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter路由守卫拦截的实现
  • 955
分享到

Flutter路由守卫拦截的实现

2024-04-02 19:04:59 955人浏览 泡泡鱼
摘要

目录为什么要使用路由Flutter路由守卫拦截的实现一、路右表管理二、实现路由守卫为什么要使用路由 在之前我们的代码中,页面跳转使用的代码如下所示: Navigator.of(con

为什么要使用路由

在之前我们的代码中,页面跳转使用的代码如下所示:

Navigator.of(context).push(
  MaterialPageRoute(builder: (context) => LoginPage()),
);

开发过程中,随着页面的增加,如果继续使用这种方式会有如下缺陷:

  • 代码耦合严重:涉及到页面跳转的地方就需要插入页面的构造函数,意味着需要知道其他页面的构建方式。
  • 不易维护:一旦某个页面发生了变化,需要将涉及到该页面的跳转全部改变。
  • 权限控制不方便:假设某些页面需要授权后才可以访问,需要在各个地方插入权限判断。

Flutter路由守卫拦截的实现

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

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

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

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

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

关于路由基础相关知识请查看Flutter Navigator路由传参

一、路右表管理

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

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

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

二、实现路由守卫

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

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
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路由守卫拦截的实现的文章就介绍到这了,更多相关Flutter路由守卫拦截内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Flutter路由守卫拦截的实现

本文链接: https://www.lsjlt.com/news/146862.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter路由守卫拦截的实现
    目录为什么要使用路由Flutter路由守卫拦截的实现一、路右表管理二、实现路由守卫为什么要使用路由 在之前我们的代码中,页面跳转使用的代码如下所示: Navigator.of(con...
    99+
    2022-11-13
  • react路由守卫的实现(路由拦截)
    react不同于vue,通过在路由里设置meta元字符实现路由拦截。在使用 Vue ,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或...
    99+
    2022-11-12
  • Flutter实现页面路由及404路由拦截
    为什么要使用路由 在之前我们的代码中,页面跳转使用的代码如下所示: Navigator.of(context).push( MaterialPageRoute(builde...
    99+
    2022-11-12
  • Flutter app页面路由以及路由拦截的实现
    目录为什么要使用路由 Flutter路由介绍 页面结构与逻辑 实现关键代码 页面路由跳转 为什么要使用路由 在之前我们的代码中,页面跳转使用的代码如下所示: Navigato...
    99+
    2022-11-12
  • Vue路由守卫之路由独享守卫如何实现
    这篇文章主要介绍了Vue路由守卫之路由独享守卫如何实现,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。路由独立守卫,顾名思义就是这个路由自己的...
    99+
    2022-10-19
  • Flutter如何完成路由拦截,实现权限管理
    目录相关文章 fluro 路由拦截思路 定义路由时拦截 跳转时拦截 之前几篇介绍了 fluro 的路由管理和转场动画,本篇介绍如何完成路由拦截,进而实现权限管理。“此路是我开,此树...
    99+
    2022-11-12
  • vue路由实现登录拦截
    目录一、概述二、路由导航守卫实现登录拦截一、概述 在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断。 ...
    99+
    2022-11-11
  • vue-router钩子函数实现路由守卫
    目录概述全局钩子函数路由独享的钩子函数组件内的钩子函数概述 何为路由守卫?路由守卫有点类似于ajax的请求拦截器,就是请求发送之前先给你拦截住做一些事情之后再去发送请求,同样这里的路...
    99+
    2022-11-12
  • vue中怎么实现一个路由拦截器和请求拦截器
    本篇文章给大家分享的是有关vue中怎么实现一个路由拦截器和请求拦截器,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。路由拦截器已路由为导向rou...
    99+
    2022-10-19
  • ReactRouterV5:使用HOC组件实现路由拦截功能
    目录前言一、创建一个HOC组件二、使用withRouter组件三、实现路由拦截前言 在Web应用程序中,需要对一些页面进行访问限制,只允许已经登录的用户访问受保护的页面。React ...
    99+
    2023-03-14
    React Router 路由拦截 React 路由拦截
  • 使用vue-router钩子函数怎么实现路由守卫
    这篇文章给大家介绍使用vue-router钩子函数怎么实现路由守卫,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。全局钩子函数beforeEach:beforeEach一共接收三个参数,分别是to、from、next;t...
    99+
    2023-06-14
  • angular如何实现未登录状态拦截路由跳转
    这篇文章给大家分享的是有关angular如何实现未登录状态拦截路由跳转的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。使用angularjs的但页面应用时,由于是本地路由在控制页面...
    99+
    2022-10-19
  • flutter 路由机制的实现
    目录实现基础 _routeNamed _flushHistoryUpdates add push pop remove 总结 整个 flutter 应用的运行都只是基于原生...
    99+
    2022-11-12
  • 使用vue路由怎么实现一个登录拦截功能
    本篇文章给大家分享的是有关使用vue路由怎么实现一个登录拦截功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。一、概述vue-router提供了导航钩子:全局前置导航钩子 be...
    99+
    2023-06-14
  • React Router V5怎么使用HOC组件实现路由拦截功能
    本篇内容主要讲解“React Router V5怎么使用HOC组件实现路由拦截功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React Router ...
    99+
    2023-07-05
  • Vue2.x配置路由导航守卫实现用户登录和退出
    目录前言一、配置路由导航守卫1. 全局导航守卫2. 局部导航守卫二、用户登录1. axios配置2. 用户登录代码三、用户退出1. 实现代码总结前言 之前在Vue的学习中通过路由导...
    99+
    2022-11-12
  • Angular4.x如何通过路由守卫进行路由重定向实现根据条件跳转到相应的页面
    这篇文章主要介绍了Angular4.x如何通过路由守卫进行路由重定向实现根据条件跳转到相应的页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作