如何為 graphql/flutter 設置登錄令牌

Question

我為我的應用設置了登錄/注冊，目前使用硬編碼令牌。 但是，我想在登錄時設置動態令牌。 這是我現在擁有的代碼。

final AuthLink authLink = AuthLink(
  // getToken: () async => 'Bearer <YOUR_PERSONAL_ACCESS_TOKEN>',
  // OR
  getToken: () async =>
     "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYwMzRkNGIyMzkwMDZhM2M4YmYxYWM2ZSIsInVzZXJuYW1lSWQiOiJCbGFjayBQYW50aGVyIiwiaWF0IjoxNjE1OTA2NzY3LCJleHAiOjE2MTY1MTE1Njd9.1xliIkkVdLkOO9AGkWwOdGhBCU18bYh26WPa4YFmEeo",
);

Answer 1

您可以為此使用任何 state 管理！ 為了完成，我將使用Riverpod

第1步：創建一個graphql_config.dart文件並添加這個

final StateProvider<String> authTokenProvider =
  StateProvider<String>((_) => '', name: 'tokenP');

final gqlClientProvider = Provider<ValueNotifier<GraphQLClient>>(
 (ref) {
final String token = ref.watch(authTokenProvider).state;

final Link _link = HttpLink('YOUR_GRAPHQL_LINK', defaultHeaders: {
  if (token.isNotEmpty) 'Authorization': 'Bearer $token',
});

return ValueNotifier(
    GraphQLClient(
      link: _link,
      cache: GraphQLCache(store: HiveStore()),
      ),
    );
  },

名稱：'gql 提供者'，）；

第 2 步：使用GraphQLProvider包裝您的MaterialApp （ main.dart 文件）

class MyApp extends ConsumerWidget {
 @override
 Widget build(BuildContext context, ScopedReader watch) {
 final client = watch(gqlClientProvider);

 return GraphQLProvider(
  client: client,
  child: CacheProvider(
    child: MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'YOUR_APP_TITLE',
      ...

第三步：登錄成功后更新token。 只需調用 Provider 並更新令牌

  context.read(authTokenProvider).state ='YOUR_TOKEN';

PS。 我沒有從文檔中找到一個很好的例子，所以我想出了這個

Answer 2

像在代碼示例中那樣使用AuthLink ：

final httpLink = HttpLink('https://...');
final authLink = AuthLink(getToken: () async => 'Bearer ${await ref.read(tokenProvider)}');
final link = authLink.concat(httpLink);

return GraphQLClient(
  link: link,
  cache: GraphQLCache(),
);

在此代碼中， tokenProvider是返回最新令牌的FutureProvider (Riverpod)。每個請求都會調用此提供程序。