Apollo client + Next.js - добавление токена авторизации в запрос клиента - PullRequest
Новая
       78

Apollo client + Next.js - добавление токена авторизации в запрос клиента

0 голосов
/ 24 сентября 2019

ЦЕЛЬ

Я хочу заполнить свой заголовок 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);

TRIED

  • Я пытался получить доступ к localStorage из функции withApollo, но это SSR, поэтому я не могу получить к нему доступ.Я собирался использовать localStorage, чтобы установить логическое значение для проверки функции withApollo, чтобы он знал, что токен доступа был добавлен в кеш apollo после перенаправления.
  • Я пыталсяпросто используя кеш с ключом, хранящим логическое значение, чтобы проверить, выполнил ли пользователь вход в который установлен в той же функции, что и токен доступа.Если это так, я получу доступ к ключу токена доступа и добавлю его в заголовок Authorization.Но у меня были проблемы с установкой начального состояния, переопределяющего кэш, установленный в функции входа в систему.

ДРУГИЕ ИДЕИ

  • Я думалЯ мог бы передать токен доступа в аргументе ctx, но я недостаточно знаком с Next.js, чтобы выяснить, является ли это правильным способом.

  • Я думалЯ мог бы передать реквизиты функции withApollo от компонента, но это не похоже на то, что это было бы возможно.

ВОПРОСЫ

  • Каков наилучший способ хранения ключа доступа для добавления его в клиент Apollo при каждом запросе?
  • Я заметил, что некоторые люди используют полифилл fetch, еслиподойдет для этой ситуации?Если да, то как это будет работать?
  • Как работает withApollo HOC и зачем он нужен для работы с Next.js?Я читал код, стоящий за этим, но я не понимаю, зачем он нужен.

1 Ответ

0 голосов
/ 25 сентября 2019

Мне удалось найти решение моего вопроса.Я просто не полностью понял клиента Apollo и как использовать все необходимые пакеты.

РЕШЕНИЕ

Я использовал setContext из библиотеки apollo-link-context,Он входит в набор link библиотек, которые Apollo Client предлагает для настройки сетевого запроса после начала операции 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}` : "",
      'Access-Control-Allow-Origin': 'http://localhost:3000/'
    }
  }
});

Следующее находится за пределами функции withApollo. 

const httpLink = new HttpLink({
  uri: '<server uri>',
});

Следующее находится внутри функции withApollo. 

return new ApolloClient({
    cache,
    link: authLink.concat(httpLink),
    typeDefs,
    resolvers
  })

Документы для setContext здесь здесь и документы для `apollo-link-context ' здесь .

...