如何从FlutterSecureStorage的read调用中读取字符串类型的token值？

FlutterSecureStorage.read() 是异步 IO 操作，返回的是 Future<String?> 类型的对象，直接赋值或调用 toString() 只能拿到异步任务的标识，无法获得实际存储的字符串值。

解决方案1：async/await 异步调用 #

initState 本身不支持标记为 async，需要把读取逻辑封装为单独的异步方法，在 initState 中触发调用：

// 定义变量存储token
String? storedToken;

@override
void initState() {
  super.initState();
  // 触发异步读取逻辑
  _loadJwtToken();
}

Future<void> _loadJwtToken() async {
  const _storageToken = FlutterSecureStorage();
  // 用await等待异步操作完成，拿到实际的token值
  storedToken = await _storageToken.read(key: 'jwt');
  // 所有依赖token的逻辑都可以写在这里
  print(storedToken);
  
  // 如果需要根据token更新UI，调用setState触发重绘
  setState(() {});
}

解决方案2：FutureBuilder 组件绑定UI #

如果需要在Widget布局中直接使用token值，可以使用FutureBuilder组件监听异步任务状态，自动根据读取结果构建UI：

@override
Widget build(BuildContext context) {
  const _storageToken = FlutterSecureStorage();
  return FutureBuilder<String?>(
    // 传入异步读取任务
    future: _storageToken.read(key: 'jwt'),
    builder: (context, snapshot) {
      // 读取完成的情况
      if (snapshot.connectionState == ConnectionState.done) {
        final token = snapshot.data;
        if (token != null) {
          // 已拿到token，构建登录后的UI
          return HomePage(token: token);
        } else {
          // 无token，构建登录页
          return LoginPage();
        }
      }
      // 读取中显示加载动画
      return const Center(child: CircularProgressIndicator());
    },
  );
}

注意：所有依赖token的业务逻辑必须放在异步操作完成的回调位置，不能在同步代码中直接读取异步方法的返回值

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