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路由鉴权

相关推荐
风华圆舞5 小时前
在 Flutter 鸿蒙项目里接入语音识别的完整思路
flutter·语音识别·harmonyos
番茄去哪了6 小时前
神领物流面试题(一)
java·大数据·中间件
风华圆舞7 小时前
鸿蒙 + Flutter 下如何让 HarmonyOS 能力真正服务于 AI 体验
人工智能·flutter·harmonyos
BreezeDove8 小时前
【Android】Flutter3.35项目启动超时问题
android·flutter
念何架构之路9 小时前
消息中间件
中间件
风华圆舞9 小时前
鸿蒙 MICROPHONE 权限在 Flutter 项目里怎么处理
flutter·华为·harmonyos
都说名字长不会被发现9 小时前
Spring Boot Starter 中间件账号密码加密方案设计与实现
java·spring boot·后端·中间件
愚者Pro1 天前
切换本地 Flutter SDK 版本
flutter
TT_Close1 天前
别再复制旧 Flutter 工程了,真正拖慢你的不是业务代码
flutter·npm·visual studio code
风华圆舞1 天前
鸿蒙 + Flutter 下 AI 助手为什么要支持流式输出
人工智能·flutter·harmonyos