Jwt Can'；t设置Apollo客户端的身份验证标头

我正在开发一个Laravel应用程序，它在客户端使用React和Redux，带有React预置和混合。我决定试用GraphQL作为API，而不是通常的RESTAPI方法，到目前为止，它工作正常。然而，我现在陷入了困境

我使用Apollo作为我的HTTP客户端，因为它是为使用GraphQL而构建的。在过去，我曾使用过保护API的方法，所以我在这里自然也采用了这种方法，因为实现只是添加适当的头的一种情况。我已经注意到了，但是标题没有设置好。下面是有问题的JS文件：

import LinkList from './components/LinkList';
import React from 'react';
import ReactDOM from 'react-dom';
import {Container} from './container';
import {createStore} from 'redux';
import reducer from './reducer';
import {Provider} from 'react-redux';
import {fromJS} from 'immutable';
import ApolloClient from 'apollo-boost';
import gql from 'graphql-tag';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = createHttpLink({
    uri: window.initialData.graphql_route
});

const authLink = setContext((_, { headers }) => {
    const token = window.initialData.jwt;
    // 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()
});

client.query({
    query: gql`{
        links {
            id
            title
            link
        }}`
}).then(result => console.log(result));

const store = createStore(
    reducer,
    fromJS(window.initialData),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

if (document.getElementById('list')) {
    ReactDOM.render(
        <Provider store={store}>
            <Container />
        </Provider>,
        document.getElementById('list')
    );
}

从“/components/LinkList”导入链接列表；
从“React”导入React；
从“react dom”导入react dom；
从“./Container”导入{Container}；
从“redux”导入{createStore}；
从“./reducer”导入减速机；
从'react redux'导入{Provider}；
从“不可变”导入{fromJS}；
从“apollo boost”导入apollo客户端；
从“graphql标签”导入gql；
从'apollo link http'导入{createHttpLink}；
从“阿波罗链接上下文”导入{setContext}；
从'apollo cache inmemory'导入{InMemoryCache}；
const httpLink=createHttpLink({
uri:window.initialData.graphql_路由
});
const authLink=setContext（（{headers}）=>{
const token=window.initialData.jwt；
//将标题返回到上下文，以便httpLink可以读取它们
返回{
标题：{
…标题，
授权：令牌？`Bearer${token}`:“”，
}
}
});
const客户端=新客户端({
链接：authLink.concat（httpLink），
缓存：新的InMemoryCache（）
});
client.query({
查询：gql`{
链接{
身份证件
标题
链接
}}`
}).then（result=>console.log（result））；
const store=createStore(
减速器，
fromJS（window.initialData），
窗口.\uuuuRedux\uDevTools\uuuu扩展&&window.\uuuuRedux\uDevTools\uuuu扩展（）
);
if（document.getElementById（'list'））{
ReactDOM.render(
,
document.getElementById（'list'）
);
}

我在视图中填充

window.initialData

，其中包含必要的数据，包括JWT标记

window.initialData.JWT

。在

authLink

的定义中设置断点不起任何作用，这意味着它永远不会被调用

---

知道出了什么问题吗？我已经非常仔细地遵循了文档中的示例，所以我所能想到的就是它们可能已经过时了。

信息：不要将您的令牌保存在本地存储中。

您正在使用来自“apollo boost”的apollo客户端，但您的令牌配置是针对另一个apollo客户端的，{apollo client}来自“apollo客户端”

如果要使用apollo boost的apollo客户端保存令牌：

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

localStorage.getItem（'token'）

是同步的，因此不应等待