在 AppSync API 中使用 AWS Cognito 进行身份验证，以便在我的 VUE js 应用程序中使用订阅

Question

您好，我正在创建一个 Vue 应用程序，我想使用 AWS AppSync 订阅来实时更新 Web 应用程序页面的内容。 我知道我可以使用 AWS Amplify 服务创建应用程序，但我想自己创建 Vue 应用程序。 我可以使用 aws api 密钥连接到 AppSync API，但现在我想使用额外的授权提供程序，以便使用登录我的应用程序的用户已经拥有的令牌对 AWS Cognito 进行身份验证。为了使用 api 密钥连接，我遵循此文档 我在此处粘贴了用于连接和使用 AppSync 订阅的主要代码：

在我的 vue 应用程序的 main.js 中，我有：

import App from './App.vue'
import router from './router'
import store from './store'

import { Amplify } from 'aws-amplify';

Amplify.configure({
    API: {
      GraphQL: {
        endpoint: 'https://myappsync.example.com/graphql',
        region: 'eu-west-1',
        // Set the default auth mode to "apiKey" and provide the API key value
        //defaultAuthMode: 'userPool',
        defaultAuthMode: 'apiKey',
        apiKey: 'xxx-xxxxxxxxxxxxxxxxx',
      }
    }
});
createApp(App).use(router).use(store).mount('#app')

在页面视图文件中，我在 vue 挂载函数中使用此代码， 它允许我监听 DynamoDb 修改

import { generateClient } from 'aws-amplify/api';
import * as subscriptions from '@/graphql/subscriptions';

export default {

...

mounted(){
    const client = generateClient();
    const updateSub = client
    .graphql({ query: subscriptions.onUpdateOrders })
    .subscribe({
      next: ({ data }) => console.log(data),
      error: (error) => console.warn(error)
    });    
  },

...

}

我尝试像这样在 main.js 中配置 Amplify，传递 Cognito 用户令牌，但它不起作用

Amplify.configure({
    API: {
      GraphQL: {
        endpoint: 'https://appsync.example.com/graphql',
        region: 'eu-west-1',
        defaultAuthMode: 'userPool',
        headers: async () => ({
            'Authorization': 'Bearer xxxxxx'
        })
        /*defaultAuthMode: 'apiKey',
        apiKey: 'xxx-xxxxxxxxxxxxx',*/
      }
    }
});

Answer 1

我也在纠结这个问题，你解决了吗？