要解决"Apollo setContext无法保存来自服务器的令牌"的问题,你可以尝试以下方法:
方法1:使用本地存储
你可以使用浏览器的本地存储(如localStorage)来保存来自服务器的令牌。在调用Apollo的setContext方法时,将令牌存储在本地存储中,然后在每次请求时,从本地存储中读取令牌并设置到请求的上下文中。
示例代码:
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
uri: 'https://your-graphql-api-url',
cache: new InMemoryCache(),
});
// 从本地存储中获取令牌
const token = localStorage.getItem('token');
// 设置请求的上下文
client.setContext(() => ({
headers: {
Authorization: token ? `Bearer ${token}` : '',
},
}));
// 发起请求
client.query({...})
.then(response => {
// 处理响应
})
.catch(error => {
// 处理错误
});
在这个示例中,我们使用localStorage.setItem方法将令牌保存在本地存储中,然后在setContext方法中获取令牌并将其设置为请求的上下文中的Authorization头。
方法2:使用Cookie
另一种方法是使用Cookie来保存令牌。在每次请求时,将令牌作为Cookie发送到服务器。
示例代码:
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
uri: 'https://your-graphql-api-url',
cache: new InMemoryCache(),
});
// 设置请求的上下文
client.setContext((request) => {
const token = getCookie('token');
return {
headers: {
Authorization: token ? `Bearer ${token}` : '',
},
};
});
// 发起请求
client.query({...})
.then(response => {
// 处理响应
})
.catch(error => {
// 处理错误
});
// 从Cookie中获取令牌
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) {
return parts.pop().split(';').shift();
}
}
在这个示例中,我们使用getCookie方法从Cookie中获取令牌,并将其设置为请求的上下文中的Authorization头。
请注意,使用Cookie保存令牌时,你需要确保服务器端正确处理Cookie,并在每次响应中将令牌设置为Cookie。