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

Question

目标

我想用访问令牌填充我的 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);

尝试过

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

其他想法

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

  李>

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

问题

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

Answer 1

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

解决方案

我使用了来自apollo-link-context 库的setContext。它是 Apollo Client 提供的 link 库集的一部分，用于在 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}` : ""
    }
  }
});

以下内容在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。