reactjs - 更改 jwt 令牌的 Apollo 客户端选项
问题描述
当用户登录时,我想在我的 apollo 客户端中设置一个令牌。
这是我的 index.js:
const client = new ApolloClient({
ssrMode: SERVER_MODE,
cache: new InMemoryCache().restore(cache),
link: createUploadLink({
uri: process.env.REACT_APP_API_URL,
fetch: SERVER_MODE ? global.fetch : NetworkService.customFetch,
headers: {
Authorization: 'Bearer ' + window.localStorage.access_token,
}
}),
defaultOptions: NetworkService.defaultOptions,
});
ReactDOM.render(
<ApolloProvider client={client}>
<Router>
<App client={client}/>
</Router>
</ApolloProvider>,
document.getElementById('root')
);
问题是,当应用程序启动时没有令牌,因此客户端使用令牌初始化:null。
当用户登录时,我设置了令牌,但我需要刷新我的应用程序以考虑令牌。
登录 api 调用成功后,登录函数只是将令牌保存在 localStorage 中。
我应该如何处理这个?现在,我正在登录后重新加载整个页面以绕过这个问题......
解决方案
我使用了setContext
那里描述的方法:http: //dev.apollodata.com/react/auth.html#Header,它工作正常!
static authLink = setContext((_, { headers }) => {
// get the authentication token from local storage if it exists
const token = localStorage.getItem('access_token');
// return the headers to the context so httpLink can read them
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : '',
}
};
});
...
new ApolloClient({
ssrMode: SERVER_MODE,
cache: new InMemoryCache().restore(cache),
link: ApolloLink.from([
NetworkService.authLink,
NetworkService.errorLink,
NetworkService.uploadLink
]),
defaultOptions: NetworkService.defaultOptions,
});
推荐阅读
- json - 如何在 Azure 数据资源管理器的 Kusto 数据库中设置 TSV 或 W3CLOGFILE 格式的引入映射?
- html - 使用锚标记的元素方向不正确
- php - 在电子商务项目中使用 laravel 从购物车中删除产品
- php - 在 php html 中使用表单过滤数据库表
- jquery - 当 ajax 请求在完成页面加载后拦截 ajax 调用,xhr 拦截器和 ajax 启动也不起作用
- keras - keras中通过时间源代码的LSTM反向传播
- python - 聚类过程中的参数错误
- java - GIF转PNG转换PNG转换后变得模糊java
- django - 如何在Django中按升序列出不同值的整数字段
- c++ - 为什么这个本地 QMultiMap 在修改时会分离?