next-auth / urql - 访问访问令牌以在 urql 客户端中设置授权标头

编程问答 2022-05-15

问题描述

我正在使用 next-auth 来管理我的 next.js 应用程序的 JWT 令牌和会话。我也使用 urql 作为 GraphQL 客户端。我在文件中初始化 urql 客户端，如下所示：

import { createClient } from 'urql';

const client = createClient({
  url: process.env.NEXT_PUBLIC_API_URL,fetchOptions: () => {
    return {
      headers: {},// I'd like to set Auth header here...
    };
  },});

export default client;

然后将其添加到 _app.tsx 中，如下所示：

import type { AppProps } from 'next/app';
import { Provider as AuthProvider } from 'next-auth/client';
import { Provider as GraphqlProvider } from 'urql';
import client from '../graphql/client';

function App({ Component,pageProps }: AppProps) {
  const { session } = pageProps;

  return (
    <GraphqlProvider value={client}>
      <AuthProvider session={session}>
        <Component {...pageProps} />
      </AuthProvider>
    </GraphqlProvider>
  );
}

export default App;

现阶段没什么特别的。

现在我的问题是我希望能够访问访问令牌以在客户端中添加 Authorization 标头，但是因为这段代码存在于 React 组件之外，所以我无法使用 {{ 1}} 由 next-auth 提供的钩子。

任何人都可以建议解决此问题的最佳方法吗？ 谢谢。

解决方法

我得到了一位 next-auth 维护者关于如何处理这种情况的非常有用的回复：https://github.com/nextauthjs/next-auth/discussions/1806

重要的一点是让 AuthProvider 作为 _app.tsx 中最父组件，然后创建一个 useClient 钩子，您传递给 urql 的提供者：

/graphql/client.ts

import { createClient } from '@urql/core';
import { useSession } from 'next-auth/client';
import * as React from 'react';

/**
 * Get GraphQL Client in browser environments (frontend).
 *
 * If the user has an active session,it will add an accessToken to all requests
 */
const useClient = (options?: RequestInit) => {
  const [session] = useSession();
  const token = session?.accessToken;
  // const handleError = useErrorHandler();

  return React.useMemo(() => {
    const client = createClient({
      url: process.env.NEXT_PUBLIC_API_URL,fetchOptions: () => {
        return {
          headers: {
            Authorization: token ? `Bearer ${token}` : '',...(options?.headers ? options.headers : {}),},};
      },});

    return client;
  },[options,token]);
};

export default useClient;

然后创建 urql 提供程序，传入您从 useClient 钩子获取的客户端：

/graphql/provider.tsx

import React from 'react';
import { Provider } from 'urql';
import useClient from './client';

interface GraphqlProviderProps {}

const GraphqlProvider: React.FC<GraphqlProviderProps> = ({ children }) => {
  const client = useClient();

  return <Provider value={client}>{children}</Provider>;
};

export default GraphqlProvider;

然后在AuthProvider中使用它作为子_app.tsx

import { Provider as AuthProvider } from 'next-auth/client';
import type { AppProps } from 'next/app';
import GraphqlProvider from '../graphql/provider';
import '../styles/index.css';

function App({ Component,pageProps }: AppProps) {
  const { session } = pageProps;

  return (
    <AuthProvider session={session}>
      <GraphqlProvider>
        <Component {...pageProps} />
      </GraphqlProvider>
    </AuthProvider>
  );
}

export default App;

最后，您可以暂停所有 useQuery 请求，直到 session 被初始化： /pages/index.tsx

import { signIn,signOut,useSession } from 'next-auth/client';
import React from 'react';
import { useQuery } from 'urql';

interface HomeProps {}

const Home: React.FC<HomeProps> = ({}) => {
  const [session,loading] = useSession();

  const QUERY = `
  query {
    users {
      id
      name
      email
    }
  }
  `;

  const request = useQuery({ query: QUERY,pause: !session });
  console.log(request);
  
  return (
    <div>
      {!session && (
        <>
          Not signed in <br />
          <button onClick={() => signIn()}>Sign in</button>
        </>
      )}

      {session && (
        <>
          Signed in as {session.user.email} <br />
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )}
    </div>
  );
};

export default Home;

它有效！您可以在网络请求中看到带有有效 jwt 令牌的 auth 标头 :-)

next-authreactjsreactjsreactjsreactjsurql