0

我正在使用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 组件之外，因此我无法使用useSessionnext-auth 提供的钩子。

任何人都可以提出解决这个问题的最佳方法吗？谢谢。

4

1 回答 1

2

我能够从其中一位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 标头 :-)

于 2021-04-25T23:22:46.247 回答