Getx学习笔记之中间件鉴权

目录

前言

一、实现步骤

1.添加依赖

2.创建鉴权中间件

3.定义路由

4.设置初始路由

5.模拟登陆状态

二、Getx鉴权步骤总结

三、本文demo示例

四、参考文章


前言

在 Flutter 中,使用 GetX 可以很方便地实现中间件鉴权(Authentication)。中间件可以在导航之前拦截路由请求,并进行相应的处理,例如检查用户是否已登录。如果未登录,则可以重定向到登录页面。

本文通过一个登陆页面的例子,介绍下Getx如何实现中间件鉴权。

一、实现步骤

我们看一下我们要实现的页面:

图1.鉴权页面

1.添加依赖

在 pubspec.yaml 文件中添加 GetX 依赖:

dependencies:

flutter:

sdk: flutter

get: ^4.6.6

复制代码
shared_preferences: ^2.2.3

2.创建鉴权中间件

创建一个中间件类,用于检查用户的登录状态。

这里是模仿登陆页面,登陆成功之后把登陆成功之后的标记使用SharedPreference保存在本地。中间类从本地读取这个标记,如果没有登陆,重定向到登陆页面。

Dart 复制代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../routes.dart';

class AuthMiddleware extends GetMiddleware {
  @override
  RouteSettings? redirect(String? route) {
    // 检查用户是否已登录
    // 从 SharedPreferences 中获取登录状态
    SharedPreferences.getInstance().then((prefs) {
      bool isLoggedIn = prefs.getBool('isLoggedIn') ?? false;
      if (!isLoggedIn) {
        return const RouteSettings(name: Routes.login); // 重定向到登录页面
      }
      return null; // 继续导航
    });

    return null; // 继续导航
  }
}

3.定义路由

在路由配置中应用中间件。

这里仅有两个页面,首页和登陆页面。实际开发的过程中可能页面比较多,有些页面即使不登录也可以进入,有些页面必须登陆之后才能进入。

Dart 复制代码
import 'package:get/get.dart';
import 'package:your_app_name/middlewares/auth_middleware.dart';
import 'package:your_app_name/pages/home_page.dart';
import 'package:your_app_name/pages/login_page.dart';

class Routes {
  static const home = '/home';
  static const login = '/login';

  static final routes = [
    GetPage(
      name: home,
      page: () => HomePage(),
      middlewares: [AuthMiddleware()], // 应用鉴权中间件
    ),
    GetPage(
      name: login,
      page: () => LoginPage(),
    ),
  ];
}

4.设置初始路由

在应用程序的入口文件中,设置 GetX 路由。

Dart 复制代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:your_app_name/routes/routes.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: Routes.home,
      getPages: Routes.routes,
    );
  }
}

5.模拟登陆状态

在实际应用中,你可能会从持久存储(如 SharedPreferences)或服务器端获取用户的登录状态。以下是一个简单的示例,这里仅做演示,逻辑比较简单,用户输入用户名和密码之后,默认用户登录,并且把登陆的凭证保存在本地,同时在应用启动时检查登录状态:

Dart 复制代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:your_app_name/routes/routes.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final prefs = await SharedPreferences.getInstance();
  final isLoggedIn = prefs.getBool('isLoggedIn') ?? false;

  runApp(MyApp(isLoggedIn: isLoggedIn));
}

class MyApp extends StatelessWidget {
  final bool isLoggedIn;

  MyApp({required this.isLoggedIn});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: isLoggedIn ? Routes.home : Routes.login,
      getPages: Routes.routes,
    );
  }
}

二、Getx鉴权步骤总结

1.自定义一个**AuthMiddleware类:**实现自定义的中间件类 AuthMiddleware,继承 GetMiddleware。在 redirect 方法中检查用户的登录状态,若未登录则重定向到登录页面。

2.Routes:定义应用的路由配置,在需要鉴权的路由上应用 AuthMiddleware。

3.使用 GetMaterialApp 设置路由和初始页面,根据用户的登录状态设置初始路由。

通过上述步骤,你可以在 GetX 中实现中间件鉴权,确保未登录用户无法访问需要鉴权的页面。根据实际需求,你可以进一步完善鉴权逻辑,例如集成第三方认证服务、处理不同类型的用户权限等。

三、本文demo示例

本文的代码在这里

四、参考文章

1.Getx官方文档

2.Getx路由鉴权

相关推荐
瓜子三百克3 小时前
七、性能优化
flutter·性能优化
~山有木兮7 小时前
LiteHub中间件之限流实现
网络·http·中间件
恋猫de小郭11 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
fo安方15 小时前
运维的利器–监控–zabbix–第三步:配置zabbix–中间件–Tomcat–步骤+验证
运维·中间件·zabbix
小蜜蜂嗡嗡17 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克21 小时前
十、高级概念
flutter
Code季风1 天前
Gin 中间件详解与实践
学习·中间件·golang·go·gin
帅次1 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡1 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉2 天前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter