如何为 graphql/flutter 设置登录令牌

时间:2021-03-16 19:08:49

标签: flutter graphql graphql-flutter

我已经为我的应用设置了登录/注册,目前使用硬编码令牌进行操作。但是,我想在登录时设置动态令牌。这是我现在的代码。

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

1 个答案:

答案 0 :(得分:0)

您可以为此使用任何状态管理!为了完成起见,我将使用 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()),
      ),
    );
  },

name: 'gql 提供者', );

第 2 步:使用 GraphQLProvider

包装您的 MaterialAppmain.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',
      ...

第 3 步:登录成功后更新令牌。只需调用 Provider 并更新令牌

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

附注。我没有从文档中找到一个很好的例子,所以我想出了这个