在Apollo Client中,可以通过使用ApolloLink
来发送身份验证或授权相关的标头。下面是一个示例代码,展示了如何基于身份验证状态发送不同的标头:
import { ApolloClient, InMemoryCache, ApolloLink, HttpLink } from '@apollo/client';
// 创建一个身份验证的中间件
const authMiddleware = new ApolloLink((operation, forward) => {
// 根据身份验证状态设置不同的标头
const headers = isAuthenticated()
? {
Authorization: `Bearer ${getAuthToken()}`,
}
: {};
// 将标头添加到操作中
operation.setContext(({ headers: prevHeaders = {} }) => ({
headers: {
...prevHeaders,
...headers,
},
}));
return forward(operation);
});
// 创建Apollo Client实例
const client = new ApolloClient({
link: authMiddleware.concat(new HttpLink({ uri: 'https://example.com/graphql' })),
cache: new InMemoryCache(),
});
在上面的代码中,首先创建了一个名为authMiddleware
的ApolloLink
,它会在每个请求中添加身份验证标头。authMiddleware
接受一个operation
对象和一个forward
函数作为参数。
在authMiddleware
中,我们可以根据身份验证状态设置不同的标头。这里使用了一个isAuthenticated
函数来判断用户是否已通过身份验证,并使用getAuthToken
函数来获取身份验证令牌。
然后,通过operation.setContext
方法将标头添加到操作中。setContext
方法接受一个函数作为参数,该函数返回一个包含要添加到操作中的标头的对象。
最后,创建ApolloClient
实例时,使用authMiddleware.concat(new HttpLink({ uri: 'https://example.com/graphql' }))
将身份验证中间件链接到HttpLink
。这样,每次发送请求时,都会先添加身份验证标头,然后再执行实际的HTTP请求。
请根据自己的身份验证/授权逻辑和后端API的要求进行适当的修改。