Apollo客户端+ Next.js-向客户端请求添加授权令牌

Question

GOAL

我想用访问令牌填充我的Authorization标头。我要将访问令牌存储在Apollo缓存中，因为Auth0明确声明不要在本地存储中存储访问令牌（我不知道为什么Apollo Client docs似乎认为还可以）。

失败，我想安全地存储我的访问令牌，并能够将其添加到对Apollo服务器的每个Apollo客户端请求中。

const apolloClient = withApollo(({ctx, headers, initialState}) => {
  const cache = new InMemoryCache();

  // Code here to access local cache.

  return new ApolloClient({

    cache,
    link: new HttpLink({
      uri: <apollo server endpoint>,
      headers: {
        Authorization: `Bearer ${accessToken}`,
        'Access-Control-Allow-Origin': 'http://localhost:3000/',
        ...headers
      },
      credentials: 'include'
    }),
    typeDefs,
    resolvers
  })
})

class MyApp extends App {
  render() {
    const { Component, pageProps, apollo } = this.props;


    return (
      <ApolloProvider client={apollo}>
        <Component {...pageProps} />
      </ApolloProvider>
    );
  }
}

export default apolloClient(MyApp);

受审

• 我已经尝试从localStorage函数中访问withApollo，但这是SSR，所以我无法访问它。我打算使用localStorage设置一个布尔值来检入withApollo函数，这样它将知道在重定向后访问令牌已添加到阿波罗缓存中。
• 我已经尝试过将缓存与存储布尔值的键一起使用，以检查用户是否已登录，并且该令牌与访问令牌的功能相同。如果是这样，我将访问访问令牌密钥并将其添加到Authorization标头中。但是我在设置初始状态而不是登录功能中设置的缓存时遇到了问题。

OTHER IDEAS

• [我以为我可以在ctx参数中传递访问令牌，但是我对Next.js不够熟悉，无法确定这样做是否有效。

• [我以为我可以从一个组件中将props传递给withApollo函数，但这似乎不太可能。

问题

• 存储访问密钥以便随每个请求将其添加到Apollo客户端的最佳方法是什么？
• [我注意到有些人正在使用fetch填充胶，是否适合这种情况？如果是这样，那将如何工作？
• withApollo HOC如何工作，为什么需要与Next.js一起使用？我已经阅读了一些背后的代码，但是我从根本上不明白为什么需要它。

Answer 1

我能够找到问题的解决方案。我只是不完全了解Apollo客户端以及如何使用所有必需的软件包。

溶液

我使用了setContext库中的apollo-link-context。它是link库集的一部分，Apollo Client提供了这些库，以便在graphql操作开始后自定义网络请求。我在setContext函数中设置标题。像这样：

const authLink = setContext((_, { headers }) => {
  // It is also possible to use the local storage method in here.
  const data = cache.readQuery({
    query: ACCESS_TOKEN
  });

  return {
    headers: {
      ...headers,
      authorization: accessToken ? `Bearer ${data.accessToken}` : "",
      'Access-Control-Allow-Origin': 'http://localhost:3000/'
    }
  }
});

以下内容不在withApollo功能的范围。

const httpLink = new HttpLink({
  uri: '<server uri>',
});

以下是withApollo功能的内部。

return new ApolloClient({
    cache,
    link: authLink.concat(httpLink),
    typeDefs,
    resolvers
  })

setContext如何为here的文档和'apollo-link-context'的文档为here。