首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法使用Apollo Client 3和setContext设置Auth头(apollo-link-context)

在 Apollo Client 3 中,apollo-link-context 已经被移除,取而代之的是 context 选项。要使用 Apollo Client 3 设置 Auth 头,你需要在创建 ApolloClient 实例时设置 context 选项。以下是一个示例:

代码语言:javascript
复制
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 头。最后,我们使用 fromauthLinkhttpLink 组合在一起,并将其传递给 ApolloClient 实例。

现在,每个发往 GraphQL 服务器的请求都会包含正确的 Auth 头。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券