javascript - 登录成功后如何更新ApolloClient授权头？

Question

基本上，我们的 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)。

我应该如何做到这一点，在登录成功发布请求后，来自 index.js 的授权获取最新session对象而无需重新加载整个应用程序？

Answer 1

如果使用apollo-boost就可以使用request函数

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