React & Apollo, как установить заголовок авторизации при входе пользователя? - PullRequest
Новая
       5

React & Apollo, как установить заголовок авторизации при входе пользователя?

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

Предположим, что мы изначально создаем клиента, подобного этому 

const client = new ApolloClient({
  uri:'https://api.com/graphql'
})

Первоначально этот API имеет некоторые мутации, такие как signIn и signUp, которые не требуют аутентификации.

Где-товниз по линии пользователь входит в систему и получает токен авторизации. Этот токен теперь должен быть установлен на нашем apollo client в качестве заголовка, т.е. 

headers: {
   Authorization: `Bearer ${token}`
}

Возможно ли как-то обновить client "на лету", чтобы применить этот заголовок для будущих запросов APIиспользовать это?

1 Ответ

3 голосов
/ 25 октября 2019

Согласно документации вы можете сделать это: 

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = createHttpLink({
  uri: '/graphql',
});

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

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

ОБНОВЛЕНИЕ

Вы можете обновить свой токен с помощью 'apollo-boost'

Обратите внимание, что в приведенном выше примере используется ApolloClient из пакета apollo-client. Заголовки по-прежнему могут быть изменены с помощью ApolloClient из пакета apollo-boost, но поскольку apollo-boost не позволяет изменять экземпляр HttpLink, который он использует, заголовки необходимо передавать в качестве параметра конфигурации: 

import ApolloClient from 'apollo-boost'

const client = new ApolloClient({
  request: (operation) => {
    const token = localStorage.getItem('token')
    operation.setContext({
      headers: {
        authorization: token ? `Bearer ${token}` : ''
      }
    })
  }
})
...