Как обновить заголовок авторизации ApolloClient после успешного входа? - PullRequest
Новая
       4

Как обновить заголовок авторизации ApolloClient после успешного входа?

0 голосов
/ 21 мая 2019

В основном, это есть в нашем файле index.js для настройки ApolloProvider авторизации на выполнение запросов / мутаций. 

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";

let session = localStorage.getItem("session");
let authorization = "";
if(session) {
    let sessionObj = JSON.parse(session);
    authorization = sessionObj.access_token
}

const graphQLServerURL = process.env.REACT_APP_API_URL;
const client = new ApolloClient({
    uri: graphQLServerURL + "/graphql",
    headers: {
       authorization,
    }
});

ReactDOM.render(
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>
    , document.getElementById('root'));

Когда приложение загружается впервые, заголовок authorization будетбыть null.Однако внутри компонента <App> у нас есть компонент <Login>, который в основном выполняет пост-запрос с username и password.После успешного запроса в методе .then() мы имеем: 

.then(res => {
if (res === 200) {
    localStorage.setItem("session", JSON.stringify(res.data));
    history.push("/dashboard");
});

Итак, что происходит, пользователь перенаправляется на компонент <Dashboard>, который имеет компонент <Query> (для перечисления некоторых данных).Тем не менее, authorization в ApolloClient по-прежнему null, пока я не нажму на обновление.Использование push не перезагружает компонент <App> (так что он получает обновленный session от localstorage).

Как это сделать так, чтобы после успешного пост-запроса на вход в систему,авторизация от index.js получает последний session объект без перезагрузки всего приложения?

Ответы [ 2 ]

2 голосов
/ 21 мая 2019

Вы можете использовать функцию request, если используете apollo-boost

const getToken = () => {
  const token = localStorage.getItem('token');
  return token ? `Bearer ${token}` : '';
};

const client = new ApolloClient({
  uri: graphQLServerURL + "/graphql",
  request: (operation) => {
    operation.setContext({
      headers: {
        authorization: getToken(),
      },
    });
  },
});
0 голосов
/ 21 мая 2019

Вам нужно будет использовать ссылку. Ссылка 

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),
});
...