我应该将 access_token 存储在 localStorage+Redux 还是 axios 默认值中？答案

【问题标题】：Should I store the access_token in localStorage+Redux or in axios defaults?我应该将 access_token 存储在 localStorage+Redux 还是 axios 默认值中？
【发布时间】：2019-03-27 11:33:47
【问题描述】：

我开始在我的 React 应用程序中使用 Redux。一开始我尝试使用Dan Abramov's Tutorial通过store对象上的subscribe函数来处理token的管理。

现在我看到，我可以像这样直接将令牌保存到 axios 默认值：axios.defaults.headers.common['Authorization'];

在 API 响应中收到令牌时将令牌存储为默认值是不好的做法吗？我应该改用 Redux 吗？

【问题讨论】：

标签： reactjs redux axios access-token

【解决方案1】：

您必须将您的令牌存储在local storage 中。在 API 调用中，您可以从本地存储中获取令牌。

let webApiUrl = 'example.com/abc';
let token = localStorage.getItem('token');
let headers={headers: {"Authorization" : `Bearer ${token}`} }
axios.get(webApiUrl,headers);

【讨论】：

但是如果你已经在使用 redux，你不觉得直接调用 localStorage 有点不好吗？
是的，我必须创建一个 API 服务并从中调用 API：获取、发布、放置和删除这 4 个我的主要功能，我必须为相同的令牌编码并用于所有功能.
当你在使用 axios 时，释放它的力量并将它存储在那里。如果您稍后切换到不同的 HTTP 库（不太可能），您可以考虑其他存储替代方案。
当您可以使用任何其他库时，您只需在标头中设置令牌，即使您可以使用fetch、axiox、superagent 等。这是您存储令牌的最佳方式在本地存储bcoz你可以设置在redux状态当你重新加载页面redux状态可以清除。
@BrunoPaulino 当您从登录提供程序获取它时，您会直接将其存储在那里，还是您还会使用调度使其与商店保持同步？