Flutter & 鸿蒙 Next 封装 Dio 网络请求详解：登录身份验证与免登录缓存

作者：淼.

2025-03-14
北京
本文字数：2589 字
阅读完需：约 8 分钟

在现代移动应用开发中，网络请求是不可或缺的一部分，而用户身份验证和免登录缓存机制对于提升用户体验尤为重要。Dio 是一个强大的 Dart HTTP 客户端，支持多种功能，例如请求拦截、响应拦截等。本文将详细讲解如何在 Flutter 中使用 Dio 封装网络请求，并实现登录身份验证及免登录缓存功能。

一、引入 Dio

首先，在 pubspec.yaml 文件中添加 Dio 和 shared_preferences 依赖：

dependencies:  dio: ^5.0.0  shared_preferences: ^2.0.0

复制代码

运行 flutter pub get 命令安装依赖。

二、封装 Dio 网络请求工具

（一）创建 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 基础 URL      connectTimeout: 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);      },    ));  }
  // 获取 Token  Future<String?> _getToken() async {    final prefs = await SharedPreferences.getInstance();    return prefs.getString(_tokenKey);  }
  // 登录请求  Future login(String username, String password) async {    final response = await _dio.post('/login', data: {      'username': username,      'password': password,    });
    // 保存 Token    await _saveToken(response.data['token']);    return response;  }
  // 保存 Token  Future _saveToken(String token) async {    final prefs = await SharedPreferences.getInstance();    await prefs.setString(_tokenKey, token);  }
  // 退出登录  Future logout() async {    final prefs = await SharedPreferences.getInstance();    await prefs.remove(_tokenKey); // 移除 Token  }
  // GET 请求  Future get(String path, {Map<String, dynamic>? queryParameters}) async {    return await _dio.get(path, queryParameters: queryParameters);  }
  // POST 请求  Future 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 进行身份验证非常简单。以下示例展示了如何创建一个登录界面。

（一）创建登录界面

在 lib/main.dart 文件中编写以下代码：

import 'package:flutter/material.dart';import 'services/network_service.dart';
class LoginPage extends StatefulWidget {  @override  _LoginPageState createState() => _LoginPageState();}
class _LoginPageState extends State<LoginPage> {  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';      });    }  }
  @override  Widget 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 进行网络请求与身份验证。如有疑问或建议，欢迎讨论！

发布于: 刚刚阅读数: 4

淼.

关注

还未添加个人签名 2022-10-24 加入

还未添加个人简介

发布

暂无评论

创作场景

Flutter & 鸿蒙 Next 封装 Dio 网络请求详解：登录身份验证与免登录缓存

一、引入 Dio

二、封装 Dio 网络请求工具

（一）创建 Dio 封装类

（二）代码详解

三、使用封装的 NetworkService

（一）创建登录界面

（二）代码详解

四、总结

淼.

评论