Flutter使用http库发起登录请求后如何获取后端返回的token？

核心逻辑说明 #

你通过http.post拿到的response对象里的body字段就是后端返回的原始JSON字符串，你只需要把它反序列化为Dart的Map对象，就可以取出对应的token值。另外你当前代码里请求头提前写死的authorizationHeader是多余的，登录接口本身不需要提前携带token，建议先删除该行避免请求被后端拦截报错。

具体实现步骤 #

• 确保已经导入dart:convert包，用于JSON解析
• 登录请求成功后，解析response.body为Map类型
• 按后端返回的字段名取出token值，可根据需求存入本地存储（比如shared_preferences包），供后续接口请求使用

修改后的完整代码 #

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

Future<void> login() async {
  if (_password.text.isNotEmpty && _number.text.isNotEmpty) {
    final response = await http.post(
      Uri.parse(
          'https://api.azabazar.com/api/login/?fbclid=IwAR2Sz4ky31HCG4g2Sbhn08LV3QqV76YEaIIQwpRavXRB1A4o0fq4aiQ22kE'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
        // 移除了多余的authorizationHeader，登录接口不需要提前传token
      },
      body: jsonEncode(<String, String>{
        "username": _number.text,
        "password": _password.text,
      }),
    );
    if (response.statusCode == 201) { // 注意确认后端登录成功返回的状态码是201还是200，不对的话要修改判断条件
      // 解析返回的JSON
      Map<String, dynamic> resData = jsonDecode(response.body);
      // 取出token，字段名根据后端实际返回调整，常见的有token/access_token
      String token = resData['token']; 
      print('获取到的token: $token'); // 可以先打印确认拿到的值
      
      // 这里可以加存储token的逻辑，比如用shared_preferences存到本地
      
      // 原代码里的const Text("Loged in")不会生效，要提示的话加SnackBar或者跳转页面即可
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("登录成功")));
    } else {
      throw Exception('Failed to find account.');
    }
  } else {
    ScaffoldMessenger.of(context)
        .showSnackBar(const SnackBar(content: Text("表单填写不合法")));
  }
}

注意事项 #

• 如果取token的时候报空，先打印resData确认后端返回的JSON结构，调整对应的字段名即可
• 后续其他接口需要携带token时，再把存好的token放到请求头的authorizationHeader里，格式一般为'Authorization': 'Bearer $token'，具体前缀（Basic/Bearer）要和后端要求对齐

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