当前位置：首页 > news >正文

网站建设义乌移动互联网开发心得体会

news 2025/11/2 6:20:31

网站建设义乌,移动互联网开发心得体会,企业展厅数字多媒体,快速开发工具网站目录前言一、实现步骤 1.添加依赖 2.创建鉴权中间件 3.定义路由 4.设置初始路由 5.模拟登陆状态二、Getx鉴权步骤总结三、本文demo示例四、参考文章前言在 Flutter 中，使用 GetX 可以很方便地实现中间件鉴权（Authentication&#xff09…

前言

一、实现步骤

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保存在本地。中间类从本地读取这个标记，如果没有登陆，重定向到登陆页面。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../routes.dart';class AuthMiddleware extends GetMiddleware {@overrideRouteSettings? 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.定义路由

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

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

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 路由。

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 {@overrideWidget build(BuildContext context) {return GetMaterialApp(initialRoute: Routes.home,getPages: Routes.routes,);}
}

5.模拟登陆状态

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

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});@overrideWidget build(BuildContext context) {return GetMaterialApp(initialRoute: isLoggedIn ? Routes.home : Routes.login,getPages: Routes.routes,);}
}