当前位置:  开发笔记 > 程序员 > 正文

无法为Apollo客户端设置身份验证标头

如何解决《无法为Apollo客户端设置身份验证标头》经验,为你挑选了1个好方法。

我正在使用Laravel应用程序,该应用程序在客户端使用React和Redux,以及React预设和Mix。我决定尝试使用API​​的GraphQL,而不是通常的REST API方法,到目前为止,它的工作正常。但是,我现在陷入困境。

我将Apollo用作HTTP客户端,因为它是为与GraphQL一起使用而构建的。过去,我曾使用JWT Auth来保护API,因此自然而然也选择了这种方法,因为实现只是添加适当的标头的一种情况。我遵循了有关使用Apollo设置标题的说明,但是没有设置标题。这是有问题的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(
        
            
        ,
        document.getElementById('list')
    );
}

window.initialData在视图中进行填充,其中包含必要的数据,其中包括JWT令牌window.initialData.jwt。在定义中设置断点authLink无济于事,这意味着它永远不会被调用。

知道发生了什么问题吗?我已经非常仔细地遵循了文档中的示例,因此我想到的只是它们可能过时了。



1> Alex Munoz..:

您正在使用来自“ apollo-boost”的ApolloClient,但令牌配置是针对另一个ApolloClient,即“ apollo-client”的{ApolloClient}。

如果要使用apollo-boost中的ApolloClient保存令牌:

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

Apollo Boost迁移


`localStorage.getItem('token')`是同步的,因此不应该等待
推荐阅读
刘美娥94662
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有