使用GetX实现GetPage中间件
前言
GetX 中间件（Middleware）是 GetX 框架中的一种机制，用于在页面导航时对用户进行权限控制、数据预加载、页面访问条件设置等。通过使用中间件，可以有效地控制用户的访问流程，并在适当条件下引导用户到所需页面。
这篇文文章主要介绍下GetX中间件的用法。
一、中间件的作用
中间件可用于以下场景：
- 权限控制：例如判断用户是否登录，如果未登录则跳转到登录页面。
- 数据预加载：在页面进入前进行数据的加载和检查。
- 访问条件控制：例如限制页面访问的时间或条件。
二、使用 GetMiddleware 的基本步骤
1. 创建一个继承自 GetMiddleware 的自定义中间件类。
2. 在类中重写 redirect、onPageCalled、onPageDispose 等方法，以便在导航时执行相应逻辑。
3. 在 GetPage 的 middlewares 参数中加入自定义的中间件类，实现页面访问的中间件逻辑。
三、GetMiddleware 常用方法
| 方法 | 作用说明 |
| redirect | 重定向页面到其他路由。通常用于在进入页面前进行权限判断，返回 RouteSettings 对象指定重定向页面，返回 null 则不重定向。 |
| onPageCalled | 在页面被调用时触发，适合用于进行数据预加载。 |
| onPageDispose | 在页面被销毁时触发，用于清理资源。 |
| onBindingsStart | 在页面绑定（Bindings）初始化时触发，适合进行依赖注入等操作。 |
| onPageBuildStart | 在页面构建前触发。 |
| onPageBuilt | 在页面构建完成后触发。 |
四、中间件实现登录检查的例子
我们可以通过下面的一个例子来看一下GetX中间件的用法。
在我们的实例代码中，我们会实现以下功能：
- 用户未登录时访问个人资料页面会跳转到登录页面。
- 登录后直接跳转到个人资料页面，点击退出登录后再返回登录页面。
图1.使用GetX实现中间件登陆
我们看一下具体的实现步骤：
1.创建 AuthController
AuthController 用于管理用户的登录状态，并保存状态信息（例如通过 SharedPreferences）。
import 'package:get/get.dart';
import 'package:shared_preferences/shared_preferences.dart';class AuthController extends GetxController {var isLoggedIn = false.obs;// 初始化控制器，检查登录状态Future<AuthController> init() async {final prefs = await SharedPreferences.getInstance();isLoggedIn.value = prefs.getBool('isLoggedIn') ?? false;return this;}void login() async {isLoggedIn.value = true;final prefs = await SharedPreferences.getInstance();await prefs.setBool('isLoggedIn', true); // 保存登录状态}void logout() async {isLoggedIn.value = false;final prefs = await SharedPreferences.getInstance();await prefs.remove('isLoggedIn'); // 清除登录状态}
}2.创建中间件 AuthMiddleware
import 'package:get/get.dart';
import 'auth_controller.dart';class AuthMiddleware extends GetMiddleware {@overrideRouteSettings? redirect(String? route) {final authController = Get.find<AuthController>();// 如果用户未登录，则重定向到登录页面return authController.isLoggedIn.value ? null : const RouteSettings(name: '/login');}
}3.设置路由
在 main.dart 中定义路由和页面导航逻辑，并将 AuthMiddleware 添加到 ProfilePage 的路由中。
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'auth_controller.dart';
import 'auth_middleware.dart';
import 'get_middle_ware_home_page.dart';
import 'login_page.dart';
import 'profile_page.dart';void main() async {WidgetsFlutterBinding.ensureInitialized();await Get.putAsync(() => AuthController().init()); // 初始化 AuthControllerrunApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return GetMaterialApp(initialRoute: '/', // 初始路由getPages: [GetPage(name: '/', page: () => const GetMiddleWareHomePage()),GetPage(name: '/login', page: () => LoginPage()),GetPage(name: '/profile', page: () => ProfilePage(), middlewares: [AuthMiddleware()]),],);}
}4.创建各个页面
get_middle_ware_home_page.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';class GetMiddleWareHomePage extends StatelessWidget {const GetMiddleWareHomePage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Home Page')),body: Center(child: ElevatedButton(onPressed: () {Get.toNamed('/profile'); // 导航到 Profile 页面},child: const Text('Go to Profile'),),),);}
}profile_page.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'auth_controller.dart';class ProfilePage extends StatelessWidget {const ProfilePage({super.key});@overrideWidget build(BuildContext context) {final authController = Get.find<AuthController>();return Scaffold(appBar: AppBar(title: const Text('Profile Page'),actions: [IconButton(icon: const Icon(Icons.logout),onPressed: () {authController.logout();Get.offAllNamed('/login'); // 退出后跳转到登录页面},),],),body: const Center(child: Text('Welcome to your profile!')),);}
}login_page.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'auth_controller.dart';class LoginPage extends StatelessWidget {LoginPage({super.key});final AuthController authController = Get.find();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Login Page')),body: Center(child: ElevatedButton(onPressed: () {authController.login();Get.offAllNamed('/profile'); // 登录后直接跳转到 Profile 页面},child: const Text('Login'),),),);}
}