更改 jwt 令牌的 Apollo 客户端选项答案

【问题标题】：Change Apollo Client options for jwt token更改 jwt 令牌的 Apollo 客户端选项
【发布时间】：2019-08-16 19:29:21
【问题描述】：

我想在用户登录时在我的 apollo 客户端中设置一个令牌。

这是我的 index.js：

const client = new ApolloClient({
        ssrMode: SERVER_MODE,
        cache: new InMemoryCache().restore(cache),
        link: createUploadLink({
            uri: process.env.REACT_APP_API_URL,
            fetch: SERVER_MODE ? global.fetch : NetworkService.customFetch,
            headers: {
                Authorization: 'Bearer ' + window.localStorage.access_token,
           }
        }),
        defaultOptions: NetworkService.defaultOptions,
    });

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

问题是，应用启动时没有token，所以客户端初始化为token: null。

当用户登录时，我设置了令牌，但不知何故我需要刷新我的应用程序以考虑令牌。

登录函数只是在成功登录 api 调用后将令牌保存在 localStorage 中。

我应该如何处理这个问题？现在，我正在登录后重新加载整个页面以绕过此问题...

【问题讨论】：

标签： reactjs react-apollo apollo-client

【解决方案1】：

我使用了setContext 那里描述的方法：http://dev.apollodata.com/react/auth.html#Header，它工作正常！

static authLink = setContext((_, { headers }) => {
    // get the authentication token from local storage if it exists
    const token = localStorage.getItem('access_token');

    // return the headers to the context so httpLink can read them
    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : '',
        }
    };
});

...

new ApolloClient({
    ssrMode: SERVER_MODE,
    cache: new InMemoryCache().restore(cache),
    link: ApolloLink.from([
        NetworkService.authLink,
        NetworkService.errorLink,
        NetworkService.uploadLink
    ]),
    defaultOptions: NetworkService.defaultOptions,
});

【讨论】：