公司宣传网站建设,淮安做网站需要多少钱,wap网站使用微信登陆,公司注册资金减少意味着什么✅近期推荐#xff1a;求职神器 https://bbs.csdn.net/topics/619384540 #x1f525;欢迎大家订阅系列专栏#xff1a;flutter_鸿蒙next #x1f4ac;淼学派语录#xff1a;只有不断的否认自己和肯定自己#xff0c;才能走出弯曲不平的泥泞路#xff0c;因为平坦的大路… ✅近期推荐求职神器 https://bbs.csdn.net/topics/619384540 欢迎大家订阅系列专栏flutter_鸿蒙next 淼学派语录只有不断的否认自己和肯定自己才能走出弯曲不平的泥泞路因为平坦的大路太tm无趣了 写在前面
在现代应用中处理用户身份验证和缓存是非常重要的。Dio 是一个强大的 Dart HTTP 客户端支持多种功能例如请求拦截、响应拦截等。本文将详细讲解如何在 Flutter 中使用 Dio 封装网络请求并实现登录身份验证及免登录缓存功能。
一、引入 Dio
首先在 pubspec.yaml 文件中添加 Dio 依赖
dependencies:dio: ^5.0.0shared_preferences: ^2.0.0运行 flutter pub get 命令安装依赖。
二、创建 Dio 封装类
在 lib/services 目录下新建 network_service.dart 文件编写以下代码以封装 Dio 功能
import package:dio/dio.dart;
import package:shared_preferences/shared_preferences.dart;class NetworkService {late Dio _dio;static const String _tokenKey auth_token;NetworkService() {_dio Dio(BaseOptions(baseUrl: https://api.example.com/, // 替换为你的 API 基础 URLconnectTimeout: 5000,receiveTimeout: 3000,));// 添加拦截器_dio.interceptors.add(InterceptorsWrapper(onRequest: (options, handler) async {final token await _getToken();if (token ! null) {options.headers[Authorization] Bearer $token; // 添加 Token 到请求头}print(请求: ${options.method} ${options.path});handler.next(options);},onResponse: (response, handler) {print(响应: ${response.statusCode} ${response.data});handler.next(response);},onError: (DioError e, handler) {print(错误: ${e.response?.statusCode} ${e.message});handler.next(e);},));}// 获取 TokenFutureString? _getToken() async {final prefs await SharedPreferences.getInstance();return prefs.getString(_tokenKey);}// 登录请求FutureResponse login(String username, String password) async {final response await _dio.post(/login, data: {username: username,password: password,});// 保存 Tokenawait _saveToken(response.data[token]);return response;}// 保存 TokenFuturevoid _saveToken(String token) async {final prefs await SharedPreferences.getInstance();await prefs.setString(_tokenKey, token);}// 退出登录Futurevoid logout() async {final prefs await SharedPreferences.getInstance();await prefs.remove(_tokenKey); // 移除 Token}// GET 请求FutureResponse get(String path, {MapString, dynamic? queryParameters}) async {return await _dio.get(path, queryParameters: queryParameters);}// POST 请求FutureResponse post(String path, {dynamic data}) async {return await _dio.post(path, data: data);}
}代码详解 Token 存储 使用 shared_preferences 存储用户的 Token以便后续请求中使用。_getToken() 方法用于获取存储的 Token。 登录请求 login 方法发送用户名和密码进行身份验证成功后保存返回的 Token。 请求拦截 在请求拦截器中检查是否有 Token如果有则添加到请求头中。 退出登录 logout 方法移除存储的 Token以实现用户登出。
三、使用封装的 NetworkService
在 Flutter 应用中使用 NetworkService 进行身份验证非常简单。以下示例展示了如何创建一个登录界面。
1. 创建登录界面
在 lib/main.dart 文件中编写以下代码
import package:flutter/material.dart;
import services/network_service.dart;class LoginPage extends StatefulWidget {override_LoginPageState createState() _LoginPageState();
}class _LoginPageState extends StateLoginPage {final NetworkService _networkService NetworkService();final TextEditingController _usernameController TextEditingController();final TextEditingController _passwordController TextEditingController();String _message ;void _login() async {try {final response await _networkService.login(_usernameController.text,_passwordController.text,);setState(() {_message 登录成功: ${response.data};});} catch (e) {setState(() {_message 登录失败: $e;});}}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(登录)),body: Padding(padding: const EdgeInsets.all(16.0),child: Column(children: [TextField(controller: _usernameController,decoration: InputDecoration(labelText: 用户名),),TextField(controller: _passwordController,decoration: InputDecoration(labelText: 密码),obscureText: true,),SizedBox(height: 20),ElevatedButton(onPressed: _login,child: Text(登录),),SizedBox(height: 20),Text(_message),],),),);}
}void main() runApp(MaterialApp(home: LoginPage()));代码详解
输入框使用 TextField 组件获取用户名和密码。登录按钮点击按钮后调用 _login 方法进行登录。状态管理通过 setState 更新界面显示登录结果。
写在后面
通过封装 Dio我们实现了用户身份验证与 Token 的存储和使用。使用 shared_preferences 实现简单的免登录缓存机制提高用户体验。希望这篇博客能帮助你更好地在 Flutter 中使用 Dio 进行网络请求与身份验证。如有疑问或建议欢迎讨论
