在 Apollo Client 3 中,apollo-link-context
已经被移除,取而代之的是 context
选项。要使用 Apollo Client 3 设置 Auth 头,你需要在创建 ApolloClient
实例时设置 context
选项。以下是一个示例:
import { ApolloClient, InMemoryCache, HttpLink, from } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
// 创建一个 HttpLink
const httpLink = new HttpLink({
uri: 'https://your-api-url.com/graphql',
});
// 创建一个用于设置 Auth 头的 link
const authLink = setContext((_, { headers }) => {
// 获取 token
const token = localStorage.getItem('token');
// 返回修改后的 headers
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : "",
}
};
});
// 使用 from 组合 link
const link = from([authLink, httpLink]);
// 创建 ApolloClient 实例
const client = new ApolloClient({
link,
cache: new InMemoryCache(),
});
export default client;
在这个示例中,我们首先创建了一个 HttpLink
,然后使用 setContext
创建了一个 authLink
,它会在每个请求之前设置 Auth 头。最后,我们使用 from
将 authLink
和 httpLink
组合在一起,并将其传递给 ApolloClient
实例。
现在,每个发往 GraphQL 服务器的请求都会包含正确的 Auth 头。
领取专属 10元无门槛券
手把手带您无忧上云