如何使用 graphql codegen 处理 X-Hasura-Role

Question

早上好，

我有一个 Angular WebApp，它使用带有（apollo-angular 插件和所有打字稿插件的 GraphQL codegen。一切正常，但我想处理 Hasura 角色和 Hasura 用户 ID。从 Hasura 控制台，一切都已正确配置并正常工作。

我唯一缺少的是如何在前端处理这个问题。我需要在发送给 Hasura 的每个请求中添加 X-Hasura-Role 和 X-Hasura-User-Id headers。有没有办法用 graphql-codegen 做到这一点？正确的做法是什么？

我知道我可以在 codegen.yml 上添加 headers 部分，但显然角色和用户 ID 是动态的，所以我不能在那里硬编码任何内容。

我应该使用 customFetch 组件吗？这个组件，认为，应该只拦截发送到 Hasura 的每个请求并添加所需的 headers。我不知道该怎么做所以我希望你能帮助我（我也希望有更好的解决方案）

此致

Answer 1

当您在 Angular 应用程序中创建 Apollo 客户端实例时，您可以将其设置为传递授权 header，其中应包含用户的 ID 及其角色。

Angular Apollo docs 中有这方面的示例。例如：

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { Apollo, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache,ApolloLink } from '@apollo/client/core';
import { setContext } from '@apollo/client/link/context';

const uri = '/graphql';

export function createApollo(httpLink: HttpLink) {
  const basic = setContext((operation, context) => ({
    headers: {
      Accept: 'charset=utf-8'
    }
  }));

  const auth = setContext((operation, context) => {
    const token = localStorage.getItem('token');

    if (token === null) {
      return {};
    } else {
      return {
        headers: {
          Authorization: `JWT ${token}`
        }
      };
    }
  });

  const link = ApolloLink.from([basic, auth, httpLink.create({ uri })]);
  const cache = new InMemoryCache();

  return {
    link,
    cache
  }
}

@NgModule({
  exports: [
    HttpClientModule,
  ],
  providers: [{
    provide: APOLLO_OPTIONS,
    useFactory: createApollo,
    deps: [HttpLink]
  }]
})
export class GraphQLModule {}

您有责任确保将随您的请求一起传递的 JWT 令牌在前端可用。最终，您将不得不实施某种身份验证方法，以允许用户登录并将令牌传递给您的前端应用程序。

Hasura Docs for Authentication

中提供了更多信息

还有许多 tutorials and guides 用于与不同的第三方身份验证提供商集成

如何使用 graphql codegen 处理 X-Hasura-Role

How to handle X-Hasura-Role with graphql codegen

graphql

apollo

roles

hasura

codegen