在 Apollo Client 3.0 中,可以使用 Apollo Link 将身份验证令牌传递给 WebSocket 连接。以下是一个示例代码,演示了如何在 Apollo Client 3.0 中传递身份验证令牌:
首先,安装所需的依赖项:
npm install apollo-link-ws apollo-link apollo-utilities subscriptions-transport-ws
然后,创建一个 WebSocket 连接,并将身份验证令牌添加到连接的标头中:
import { ApolloClient, InMemoryCache, ApolloLink, HttpLink, split } from '@apollo/client';
import { WebSocketLink } from '@apollo/link-ws';
import { getMainDefinition } from '@apollo/client/utilities';
import { setContext } from '@apollo/client/link/context';
import { onError } from '@apollo/client/link/error';
import { SubscriptionClient } from 'subscriptions-transport-ws';
const httpLink = new HttpLink({
uri: 'http://localhost:4000/graphql',
});
const wsClient = new SubscriptionClient('ws://localhost:4000/graphql', {
reconnect: true,
connectionParams: () => {
// 返回包含身份验证令牌的对象
return {
headers: {
Authorization: `Bearer ${YOUR_AUTH_TOKEN}`,
},
};
},
});
const wsLink = new WebSocketLink(wsClient);
const authLink = setContext((_, { headers }) => {
// 将身份验证令牌添加到请求头中
return {
headers: {
...headers,
Authorization: `Bearer ${YOUR_AUTH_TOKEN}`,
},
};
});
const errorLink = onError(({ graphQLErrors, networkError }) => {
// 处理错误
});
const link = ApolloLink.from([
errorLink,
split(
// 根据操作类型将请求路由到 HTTP 或 WebSocket 连接
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
authLink.concat(httpLink)
),
]);
const client = new ApolloClient({
cache: new InMemoryCache(),
link: link,
});
在上述代码中,我们创建了一个 WebSocketLink
对象 wsLink
,并使用 SubscriptionClient
来创建 WebSocket 连接 wsClient
。然后,我们使用 setContext
函数创建了一个 authLink
,用于将身份验证令牌添加到请求头中。
最后,我们使用 split
函数根据操作类型将请求路由到 HTTP 或 WebSocket 连接,并将所有链接组合成一个 ApolloLink
对象。
请注意替换 YOUR_AUTH_TOKEN
为实际的身份验证令牌。
这样,当使用 Apollo Client 3.0 发起 GraphQL 订阅时,身份验证令牌将被传递给 WebSocket 连接。