使用 Auth0 的钩子 useAuth0 在 Apollo 客户端中获取令牌并设置标头

Question

您好，我正在尝试将 Auth0 的 spa 示例与 react 一起使用，我正在使用 useAuth0 钩子，我也在使用 Apollo 客户端进行查询，我需要获取令牌并将其设置在请求中，但是我没有t 能够设置它。

如果有人能指出我正确的方向，我将不胜感激。

我试图在查询/变异组件中使用上下文属性，但我无法弄清楚，也找不到有关如何使用它的信息。

Answer 1

我遇到了同样的困境，尤其是因为 Auth0 钩子只能在功能组件中使用，但文档似乎在索引文件中设置了 ApolloProvider。

通过一些实验，我设法通过创建一个包装组件来解决这个问题，该组件允许我使用useAuth0钩子并异步获取/附加令牌到每个请求。

我创建了一个新文件AuthorizedApolloProvider.tsx：

import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/link-context';
import React from 'react';

import { useAuth0 } from '../react-auth0-spa';

const AuthorizedApolloProvider = ({ children }) => {
  const { getTokenSilently } = useAuth0();

  const httpLink = createHttpLink({
    uri: 'http://localhost:4000/graphql', // your URI here...
  });

  const authLink = setContext(async () => {
    const token = await getTokenSilently();
    return {
      headers: {
        Authorization: `Bearer ${token}`
      }
    };
  });

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

  return (
    <ApolloProvider client={apolloClient}>
      {children}
    </ApolloProvider>
  );
};

export default AuthorizedApolloProvider;

然后在我的 index.tsx 文件中，我App用 new包裹AuthorizedApolloProvider而不是ApolloProvider直接使用。

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    client_id={config.clientId}
    redirect_uri={window.location.origin}
    audience={config.audience}
    onRedirectCallback={onRedirectCallback}>

      <AuthorizedApolloProvider>
        <App />
      </AuthorizedApolloProvider>

  </Auth0Provider>,  
  document.getElementById('root')
);

注意：上面的例子是使用 Apollo Client 3 beta，@apollo/link-context除了@apollo/client. 我想对于 Apollo Client 的版本，所需的导入可能会有所不同。