如何将 auth api 密钥作为 React 中每个页面请求的标头传递？答案

【问题标题】：How to pass an auth api key as a header for every page request in React?如何将 auth api 密钥作为 React 中每个页面请求的标头传递？
【发布时间】：2017-11-20 23:30:45
【问题描述】：

我基本上有一个后端 api，我正在使用 React SPA。我有一个用户名密码 auth，它在客户端通过身份验证时为用户分配一个密钥。密钥需要作为每个 http 请求的标头传递。

我希望能够在每个 api 请求上传递此身份验证标头。

有没有简单的方法来做到这一点？ IE。以某种方式拥有一个顶级 React 组件来处理在每个页面请求上传递它？

我认为这是 SPA 的常见问题，并且解决方案已经存在。任何指导将不胜感激。

【问题讨论】：

将您的密钥存储在任何地方（存储/单例对象/顶级组件的状态/..）并每次都使用它

标签： reactjs http react-router

【解决方案1】：

我这样做的方法是将密钥存储在localStorage 中。因此，当您获得密钥时，请执行以下操作：

localStorage.setItem('key', key);

然后，您可以检索它：

localStorage.getItem('key');

【讨论】：

【解决方案2】：

其实和 React 或者 react-router 没有关系。这取决于 HTTP 请求库 -- 验证后，您需要做的就是配置该库并使其每次都发送 key 标头。

如果使用 jQuery 发送 API 请求，代码为：

// get key from successful authentication response
$(document).ajaxSend(function(event, jqxhr) {
  jqxhr.setRequestHeader('KEY', key);
});

如果使用 axios 发送 API 请求，代码为：

axios.defaults.headers.common['KEY'] = key;

如果使用其他东西发送 API 请求，您可以查看库的文档并进行相同的配置操作。

【讨论】：