如何使用带有不记名令牌的 get 方法在 flutter 中显示来自 api 的数据

Question

我登录后成功显示了我的令牌，此令牌用于登录后访问产品页面。问题是我的产品页面只能显示带有我拥有的令牌的数据，但我不知道如何保存我的令牌并使用它来显示我的产品数据。我的 api 和 laravel 使用 postman。

我的产品代码只有这样：

产品.dart

class pageSuccess extends StatefulWidget {
  @override
  State<pageSuccess> createState() => _pageSuccessState();
}

class _pageSuccessState extends State<pageSuccess> {
  var data;
  //SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
  //String token = sharedPreferences.getString(Constants.TOKEN)!;
  Future<void> getUserApi() async {
    final response =
        await http.get(Uri.parse('http://10.0.2.2:8000/api/produk'),
          headers:{
            'Content-Type': 'text/html; charset=UTF-8',
            //'Authorization' : 'Bearer $token',
          },
        );
        
        
    var encodeFirst = json.encode(response.body.toString());
    data = jsonDecode(encodeFirst.toString());

    if (response.statusCode == 200) {
      print(data);
      print('product success');
    } else {
      print('product failed');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Api Course'),
      ),
      body: Column(
        children: [
          Expanded(
            child: FutureBuilder(
              future: getUserApi(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Text('Loading');
                } else {
                  return ListView.builder(
                      itemCount: data.length,
                      itemBuilder: (context, index) {
                        return Card(
                          child: Column(
                            children: [
                              ReusbaleRow(
                                title: 'kode',
                                value: data[index]['kode'].toString(),
                              ),
                              ReusbaleRow(
                                title: 'nama',
                                value: data[index]['nama'].toString(),
                              ),
                              ReusbaleRow(
                                title: 'keterangan',
                                value: data[index]['keterangan'].toString(),
                              ),
                              ReusbaleRow(
                                title: 'harga',
                                value: data[index]['harga'].toString(),
                              ),
                            ],
                          ),
                        );
                      });
                }
              },
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

我通常怎么做（很多人都以多种方式做）？ 用户登录时我得到令牌。因此，我将令牌存储在

shared-preferences

var 中。

我在常量文件中创建了这个方法，以便从任何地方访问。你可以选择把它放在哪里。

Map<String, String> headersWithToken = {
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Authorization': 'Bearer $myToken'
};

String? myToken; // I'm changing this value when user success to login

class CurrentUserData {
  saveUserData(String userToken) async {
    SharedPreferences preferences = await SharedPreferences.getInstance();

    preferences.setString('currentUserToken', userToken);
  }
}

这是登录方法

if (response.statusCode == 201) {  //login success status code 201
  //print(data['success']);

  var returnMsg = data['message'];
  var userToken = data['token'],

  setState(() {
    myToken = userToken; //I've var
  });

  toastMsg(returnMsg);

  CurrentUserData().saveUserData(userToken); //this method i'm accessing from constant file

  Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => const DashboardPage()), (route) => false);
}

现在您可以从任何地方访问此 myToken 值。

http.get(Url.perse(url), headers: headersWithToken)

或直接

var res = await http.get(
    Uri.parse(userDashboardUrl),
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer $myToken'
    },
  );