Я пытаюсь добавить токены аутентификации во все свои HTTP-запросы через промежуточное ПО Apollo. Похоже, что мое промежуточное ПО никогда не увольняется. Я получаю доступ к серверу на localhost: 8081, с клиента на localhost: 8080. Я новичок в Apollo, поэтому у меня может возникнуть недопонимание насчет ApolloLink.
const httpLink = new HttpLink({ uri: 'http://localhost:8081/graphql' });
const getTokenMiddleware = new ApolloLink((operation, forward) => {
operation.setContext(({ headers }) => ({
headers: {
...headers,
'x-token': localStorage.getItem('token') || null,
'x-refresh-token': localStorage.getItem('refreshToken') || null,
},
}));
return forward(operation);
});
const client = new ApolloClient({
cache: new InMemoryCache(),
link: from([
getTokenMiddleware,
httpLink
]),
uri: 'http://localhost:8081/graphql',
});
вот заголовок, который я получаю на сервере
headers: {
host: 'localhost:8081',
connection: 'keep-alive',
'content-length': '351',
accept: '*/*',
origin: 'http://localhost:8080',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36',
'content-type': 'application/json',
dnt: '1',
referer: 'http://localhost:8080/register',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'en-US,en;q=0.9'
}
После нескольких дней ударов головой о стол я попытался переключить свой импорт ApolloClient с «apollo-boost» на импорт {ApolloClient} из «apollo-client», и теперь он работает, как ожидалось. У меня сложилось впечатление, что apollo-boost был альтернативой apollo-client, но я полагаю, что api немного другие.
@JordanHensley Да. ты прав. apollo-boost отстой.
Три часа спустя я нахожу ответ в комментарии к вопросу с двумя положительными голосами ... Это действительно плохая реализация, чтобы не выдавать никаких ошибок или, по крайней мере, предупреждений в такой ситуации. Ссылка http была полностью неконфигурируемой, не говоря уже о том, что я следую пошаговому руководству из официального источника ... спасибо, что помогли мне :)





Вот несколько необходимых шагов. Я надеюсь это решит твою проблему
// 1 HttpLink that will connect your ApolloClient instance with the GraphQL API (If you have multiple URL's)
const httpLink = split(
operation => operation.getContext().type === 'public',
new HttpLink({ uri: `${GraphQLURLPublic}/query` }),
new HttpLink({ uri: `${GraphQLURLPrivate}/query` }),
);
// 2 Added Middleware to Insert Authorization Header If Required
// Split URL to two different endpoints If the type is Private it will Token in header else it won't
const authLink = setContext((operation, previousContext) => {
const { headers, type } = previousContext;
if (type === 'public') {
return previousContext;
}
//You access token to make call
const accessToken = 'xtz'
if (accessToken) {
return {
...previousContext,
headers: {
...headers,
authorization: accessToken
},
};
}
return { ...previousContext };
});
// 3 Added error handling
const ErrorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.map(({ message, locations, path }) =>
console.info(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
),
);
if (networkError) console.info(`[Network error]: ${networkError}`);
});
// 4 concat all links, NOTE: httpLink must be last
const link = ApolloLink.from([authLink, ErrorLink, httpLink]);
// 5 Instantiate ApolloClient by passing in the composed link and a new instance of an InMemoryCache.
const graphqlConfig = new ApolloClient({ link, cache: new InMemoryCache(), queryDeduplication: false });
Помогает ли добавление
credentials: 'include'в параметры ссылки, посмотрите здесь: apollographql.com/docs/react/recipes/authentication.html и здесь: github.com/github/fetch