如何使用令牌密鑰在 Flutter 中創建 http 客戶端並將其與 Provider 一起使用？

Question

我想創建 http 客戶端，並且我想在整個應用程序中使用該 http 客戶端。 創建 http 客戶端沒什么大不了的，但我想在登錄后得到的 header 中添加令牌。

現在我正在這樣做：

web_api_service.dart

在這里，我正在使用登錄后的令牌創建帶有 dio package 的 http 客戶端

class WebApiService{
  final String? tokenKey;
  WebApiService(this.tokenKey);

  Dio _dio = Dio();

  Dio get dio {
    _dio.options.baseUrl = BASE_URL;
    _dio.options.headers = {'token': '$tokenKey'};
    return _dio;
  }

Future<List<SessionData>?> upcomingSessionData(SessionRequest request) async{
    List<SessionData>? sessions;
    try{
      var response = await dio.post('/session/upcommingSession', data: sessionRequestToJson(request));
      final responseMap = response.data;
      // print(responseMap);
      if(response.statusCode == 200){
        if(responseMap['status'] == "Success"){
          final data = upcomingSessionFromJson(jsonEncode(responseMap));
          sessions = data.data;
          print(responseMap);
          return sessions;
        }
      }
    } catch (e){
      print(e);
      rethrow;
    }
    return sessions;
  }
}

main.dart

要從 Auth 獲取令牌，我創建了一個 ProxyProvider

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Auth()),
        ProxyProvider<Auth, WebApiService>(update: (_, auth, __) => WebApiService(auth.tokenKey)),
      ],
      child: Home(),
    );
  }
}

主頁.dart

這里我使用 FutureBuilder 從 api 獲取數據

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _api = Provider.of<WebApiService>(context, listen: false);
    return FutureBuilder<List<SessionData>?>(
        future: _api.upcomingSessionData(SessionRequest(
            trainerId: "110006",
            lat: "17.387140",
            lng: "78.491684",
            role: "Admin"
        )),
        builder: (BuildContext context, AsyncSnapshot<List<SessionData>?> snapshot){
          return SomeWidget();
       }
     }
  }
}

我想要的是？

• 我不想使用 FutureBuilder 而不是我想從 controller 調用 api 以將 UI 與業務邏輯分開。
• 我想在 header 中創建一個帶有令牌密鑰的 http 客戶端（登錄后我得到令牌），我可以在整個應用程序中使用它。

任何積極的反饋也值得贊賞

Answer 1

在這種情況下，我經常使用注射器。 例如使用get_it

您可以注冊 singleton 以保存您從身份驗證邏輯獲得的令牌值。 假設我們將令牌保存在 AuthModel object 上。 例如：

final getIt = GetIt.instance;

class AuthModel {
   String? token;
   AuthModel({this.token});
}

void setup() {
  getIt.registerSingleton<AuthModel>(AuthModel());
}

在調用其他所有內容之前，在 main 中調用這些設置。

那么當我們需要更新token，或者獲取這些token的值時，只需在項目的任何地方調用getIt即可。

getIt<AuthModel>().token = NEW_TOKEN;
var savedToken = getIt<AuthModel>().token;