amazon-cognito - 如何修复来自 Apollo 客户端的 Malformed authentication header 错误

Question

我正在尝试使用 Apollo Client 将我的 React 应用程序连接到 hasura 后端 api，但我收到以下错误:

错误:GraphQL 错误:授权 header 格式错误

我不知道是什么原因造成的。

我知道我从 Cognito 获得了一个有效的 ID token ，因为我可以将它粘贴到 Hasura 控制台并且它工作正常。

我真的只是将 apollo 授权示例粘贴到我的 index.js 文件中并放入我的 uri。我开始使用 apollo-boost，但因为同样的错误而去了 apollo-client。显然，这没有帮助。我已经在互联网上搜索过，但找不到任何似乎与此相关的内容，这可能意味着我在做一些愚蠢的事情。

这是我的 index.js 中的 apollo-client 代码:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ApolloClient from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';
import { Auth } from 'aws-amplify';

async function getSession() {
    Auth.currentSession().then(res=>{
        let idToken = res.getIdToken()
        let jwt = idToken.getJwtToken()
        //if I console log jwt here I can paste it into hasura and it works
        return jwt
      })
  }

const token = getSession()

//copied from apollo docs:
const httpLink = createHttpLink({
    uri: 'https://api.example.com/v1/graphql',
  });

const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : "",
      }
    }
  });

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
  });

这里是错误:

Error: GraphQL error: Malformed Authorization header
at new ApolloError (bundle.esm.js:76)
at ObservableQuery.getCurrentResult (bundle.esm.js:200)
at ObservableQuery.currentResult (bundle.esm.js:163)
at Query._this.getQueryResult (react-apollo.esm.js:247)
at finish (react-apollo.esm.js:434)
at Query.render (react-apollo.esm.js:441)
at finishClassComponent (react-dom.development.js:15319)
at updateClassComponent (react-dom.development.js:15274)
at beginWork (react-dom.development.js:16262)
at performUnitOfWork (react-dom.development.js:20279)
at workLoop (react-dom.development.js:20320)
at renderRoot (react-dom.development.js:20400)
at performWorkOnRoot (react-dom.development.js:21357)
at performWork (react-dom.development.js:21267)
at performSyncWork (react-dom.development.js:21241)
at requestWork (react-dom.development.js:21096)
at scheduleWork (react-dom.development.js:20909)
at Object.enqueueForceUpdate (react-dom.development.js:11632)
at Query.push../node_modules/react/cjs/react.development.js.Component.forceUpdate (react.development.js:355)
at Query._this.updateCurrentData (react-apollo.esm.js:214)
at Object.error (react-apollo.esm.js:197)
at notifySubscription (Observable.js:157)
at onNotify (Observable.js:196)
at SubscriptionObserver.error (Observable.js:253)
at bundle.esm.js:541
at Array.forEach (<anonymous>)
at iterateObserversSafely (bundle.esm.js:540)
at Object.onError [as error] (bundle.esm.js:482)
at invoke (bundle.esm.js:1532)
at bundle.esm.js:1565
at bundle.esm.js:1986
at Set.forEach (<anonymous>)
at bundle.esm.js:1984
at Map.forEach (<anonymous>)
at QueryManager.broadcastQueries (bundle.esm.js:1982)
at bundle.esm.js:2109
at Object.next (Observable.js:333)
at notifySubscription (Observable.js:152)
at onNotify (Observable.js:196)
at SubscriptionObserver.next (Observable.js:248)
at bundle.esm.js:1079
at Set.forEach (<anonymous>)
at Object.next (bundle.esm.js:1078)
at notifySubscription (Observable.js:152)
at onNotify (Observable.js:196)
at SubscriptionObserver.next (Observable.js:248)
at notifySubscription (Observable.js:152)
at onNotify (Observable.js:196)
at SubscriptionObserver.next (Observable.js:248)
at bundle.esm.js:107

另外，我从浏览器中收到错误，因为查询没有返回任何内容。

这是 chrome 控制台在 graphql header 中的内容:

General:
Request URL: https://api.example.com/v1/graphql
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: 137.242.2.135:8080
Referrer Policy: no-referrer-when-downgrade

Response:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: authorization,content-type
Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,OPTIONS
Access-Control-Allow-Origin: https://example.com
Access-Control-Max-Age: 1728000
Content-Type: text/plain charset=UTF-8
Date: Thu, 18 Jul 2019 17:42:21 GMT
Server: Caddy, Warp/3.2.27

Request
Provisional headers are shown
Access-Control-Request-Headers: authorization,content-type
Access-Control-Request-Method: POST
Origin: https://example.com
Referer: https://example.com/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

如有任何帮助，我们将不胜感激。

Answer 1

分配给 token 的值属于 Promise 类型，而不是您期望的字符串。

由于 getSession() 是一个异步函数，因此它返回一个 promise 。

这一行:

const token = getSession()

将 promise 而非其解析值分配给 token 。

在将结果分配给 token 之前，您需要等待 promise 解决。