Question

对于后台我使用react，redux，react-router（v4），react-cognito和appsync。我的应用程序使用PrivateRoute来确保用户对所请求的每个路由都有授权。 react-cognito为我处理所有身份验证并在redux存储中存储JWT令牌，联合身份临时IAM访问密钥/秘密访问密钥/会话令牌。

AppSync教程假设您使用的是AWS-amplify而不是react-cognito，并将<ApolloProvider client = {this.client}>置于根应用程序级别，其中

this.client = new AWSAppSyncClient({
      url: AppSync.graphqlEndpoint,
      region: AppSync.region,
      auth: {

        // Amazon Cognito Federated Identities using AWS Amplify
        //credentials: () => Auth.currentCredentials(),

        // Amazon Cognito user pools using AWS Amplify
        // type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
        // jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken(),
      },
      disableOffline: true
    });
  }

在我的情况下，在根组件安装时，商店中没有任何反应 - cognito（我的一半SPA是公共的，不需要身份验证），我不确定在mount时可以调用什么异步函数这个曾经可用，似乎在上面的例子中完成。

目前我通过将ApolloProvider放在组件级别来解决这个问题，只针对需要它并且存在于PrivateRoutes中的组件（因此将在商店中提供凭据信息），但这会导致代码重复并感觉不对。

没有迁移到aws-amplify，有没有建议如何重构？

Answer 1

您可以继续在根组件级别使用ApolloProvider。在向AppSync API发出请求之前，只有在需要时才会读取auth配置。

更多细节：

您传递给AWSAppSyncClient构造函数的配置中auth项下的对象可以包含不同的值，具体取决于您的API使用的身份验证类型。

apiKey

API_KEY

credentials

AWS_IAM

jwtToken

AMAZON_COGNITO_USER_POOLS

这三个键可以包含值或返回promise 的函数，这些函数将使用该值解析。 AWSAppSyncClient将在每个请求上获取值（或等待承诺）。

如果在实例化时，信息还没有在redux-store中，那也无关紧要。我还没有对此进行测试（另外，我不熟悉react-cognito），但它会是这样的：

this.client = new AWSAppSyncClient({
    url: AppSync.graphqlEndpoint,
    region: AppSync.region,
    auth: {
        type: AUTH_TYPE.AWS_IAM,
        credentials: async () => {
            const state = store.getState();

            return state.cognito.creds;
        }
    },
    disableOffline: true
});

如果用户未经过身份验证，我该如何拥有根级别的AppSync / Apollo客户端？

1 个答案: