如何在页面之间使用令牌作为全局变量？答案

【问题标题】：How can I use token as global variable between pages?如何在页面之间使用令牌作为全局变量？
【发布时间】：2021-04-01 11:02:16
【问题描述】：

我想从rest api 获取用户。我有一个 loginPage、一个 homePage 和 getDataPage，用于显示 http 请求的结果。我在选择页面上创建了 4 个按钮，分别是获取、发布、编辑和删除。我想在 getDataPage 上显示这些结果，但由于 auth_token 保留在登录页面上，我不知道如何访问它。我也不确定我在 onPressed 中的代码是否正确。

imports

var token;

class ChoicePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ChoicePageState();
  }
}

class _ChoicePageState extends State<ChoicePage> {
  TextEditingController nameController = TextEditingController();
  TextEditingController surnameController = TextEditingController();
  TextEditingController emailController = TextEditingController();

//-----------------------GET USERS--------------------

  Future<List> get_users(var auth) async {
    var request = http.MultipartRequest('GET', Uri.parse('my-url'));
    var headers = {
      'Authorization': 'Bearer ' + auth,
      'Content-Type': 'application/json'
    };

    request.headers.addAll(headers);
    http.StreamedResponse response = await request.send();

    if (response.statusCode == 200) {
      return jsonDecode(await response.stream.bytesToString());
    } else {
      print(response.reasonPhrase);
    }
  }

//-----------------------ADD USERS--------------------

 Future<String> add_users(var auth, user_id) async {
    var headers = {
      'Authorization': 'Bearer ' + auth,
      'Content-Type': 'application/json'
    };

    var request = http.Request(
        'PUT', Uri.parse('my-url'));

    request.headers.addAll(headers);

    Map<String, dynamic> map = {
      "id": user_id,
      "name": nameController.text,
      "surname": surnameController.text,
      "email": emailController.text
    };

    request.body = jsonEncode(map);
    http.StreamedResponse response = await request.send();

    if (response.statusCode == 200) {
      return await response.stream.bytesToString();
    } else {
      print(response.reasonPhrase);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Home'),
        ),
        body: Container(
          padding: EdgeInsets.all(10.0),
          child: Center(
            child: SingleChildScrollView(
              child: Container(
                width: MediaQuery.of(context).size.width * 0.7,
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(8),
                      child: TextField(
                        decoration: InputDecoration(labelText: 'name'),
                        controller: nameController,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.all(8),
                      child: TextField(
                        decoration: InputDecoration(labelText: 'surname'),
                        controller: surnameController,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.all(8),
                      child: TextField(
                        decoration: InputDecoration(labelText: 'email'),
                        controller: emailController,
                      ),
                    ),
                    RaisedButton(
                      color: Theme.of(context).primaryColor,
                      textColor: Colors.white,
                      child: Text('List Users'),
                      onPressed: () async {
                        get_users(token);

                        Navigator.pushReplacement(
                          context,
                          MaterialPageRoute(
                              builder: (BuildContext context) => GetDataPage()),
                        );
                     RaisedButton(
                       color: Theme.of(context).primaryColor,
                       textColor: Colors.white,
                       child: Text('Add User'),
                       onPressed: () {
                          add_users(token);

                        Navigator.pushReplacement(
                        context,
                        MaterialPageRoute(
                            builder: (BuildContext context) => GetDataPage()),
                      );
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
        ));
  }
}

【问题讨论】：

标签： flutter dart authorization token rest

【解决方案1】：

您可以使用 InheritedWidget 或 provider 包（它实际上使用 InheritedWidget，而且更简单方便），或者您可以将令牌传递给页面构造函数

【讨论】：

【解决方案2】：

您需要的是状态管理。 Flutter 有一个很好的起点here

【讨论】：

【解决方案3】：

我选择的存储 jwt 令牌的最佳方式是使用flutter_secure_storage。这是一个很好的包来安全地存储数据。

这是一个例子：

final _storage = FlutterSecureStorage();
// to write on storage
await _storage.write(
      key: 'token',
      value: _tokenValue,
    );

//to read token key in all screens you can do it
token = await storage.read(key: 'token');

【讨论】：