Flutter基于RestAPI的登录验证问题：如何正确判断登录状态

问题背景 #

需要通过RestAPI实现Flutter登录功能，API要求传入user_id和password参数进行验证，另有一个获取用户列表的API。现有代码无论输入内容是否正确，都会打印“Success”，无法完成有效验证。

原代码问题分析 #

1. API请求方式错误：原代码使用POST请求，但给定的API是基于查询参数的GET接口，且未替换URL中的<value1>、<value2>占位符，同时错误地在请求body中传递email参数（API要求的是user_id）。
2. 验证逻辑错误：将状态码200和400都判定为登录成功，且未解析响应内容判断是否存在匹配用户。

修正后的实现代码 #

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class Login extends StatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  late final TextEditingController _userId; // 对应API的user_id参数
  late final TextEditingController _password;
  final _formKey = GlobalKey<FormState>();

  @override
  void initState() {
    _userId = TextEditingController();
    _password = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    _userId.dispose();
    _password.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // User ID 输入框
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: TextFormField(
                controller: _userId,
                decoration: const InputDecoration(
                  label: Text('User ID'),
                ),
                validator: (value) {
                  if (value!.isEmpty) {
                    return 'User ID is required';
                  }
                  return null;
                },
              ),
            ),
            // Password
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: TextFormField(
                controller: _password,
                obscureText: true,
                decoration: const InputDecoration(
                  label: Text('Password'),
                ),
                validator: (value) {
                  if (value!.isEmpty) {
                    return 'Password is required';
                  }
                  return null;
                },
              ),
            ),
            // Login Button
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: ElevatedButton(
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    try {
                      // 构建正确的API请求URL，替换参数占位符
                      final url = Uri.parse(
                        'https://retoolapi.dev/B13laa/getusers?user_id=${_userId.text}&password=${_password.text}',
                      );
                      // 使用GET请求（API为查询参数形式）
                      final response = await http.get(url);

                      if (response.statusCode == 200) {
                        // 解析响应的JSON数据
                        final List<dynamic> users = jsonDecode(response.body);
                        // 判断是否存在匹配的用户
                        if (users.isNotEmpty) {
                          print('登录成功');
                          // 这里可以添加登录成功后的跳转逻辑
                        } else {
                          print('登录失败：用户名或密码错误');
                        }
                      } else {
                        print('登录失败：请求错误，状态码${response.statusCode}');
                      }
                    } catch (e) {
                      print('请求异常：${e.toString()}');
                    }
                  }
                },
                child: const Text('Login'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修复点说明 #

• 参数匹配：将原_email控制器改为_userId，匹配API要求的user_id参数。
• 请求方式修正：使用GET请求替代POST，并正确拼接查询参数到URL中。
• 验证逻辑完善：仅当状态码为200时解析响应内容，通过检查返回的用户列表是否为空来判定登录是否成功。
• 异常处理：保留异常捕获，处理网络请求中的错误情况。

内容的提问来源于stack exchange，提问作者Kvu