reactjs - 在 Apollo 客户端中使用 Auth0 的 hook useAuth0 获取 token 并设置 header

Question

您好，我正在尝试将 Auth0 的 spa 示例与 React 一起使用，并且我正在使用 useAuth0 Hook ，我还使用 Apollo 客户端进行查询，我需要获取 token 并将其设置在请求中，但是我无法设置它。

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

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

Answer 1

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

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

我创建了一个新文件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 文件中，我使用新的 AuthorizedApolloProvider 包装 App，而不是直接使用 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/client 之外，我还必须安装 @apollo/link-context。我猜想不同版本的 Apollo Client 所需的导入可能有所不同。