在 React 项目中，我应该在哪里传递 Bearer Authentication Token？答案

【问题标题】：Where should I pass the Bearer Authentication Token in a React project?在 React 项目中，我应该在哪里传递 Bearer Authentication Token？
【发布时间】：2020-02-12 01:09:59
【问题描述】：

我有一个不记名令牌，但我不知道如何处理它。这是一个 React 项目，我正在使用 Axios 从 API 获取数据。我的问题是这个令牌去哪里了？我应该在每次使用 Axios.get 时都将其放入，还是可以将其存储在某个地方？

【问题讨论】：

我尝试使用：axios.get(API_URL, { headers: { "Authorization" : client_token }}) 但我收到一个错误：请求失败，状态码为 405
嗨，欢迎来到 StackOverflow！最好有一些上下文，以便更好地提供帮助：您在哪里找到这个令牌？ BTW 错误 405 表示你尝试了错误的 http 方法：可能是 GET 而不是 POST，或者类似的错误

标签： javascript reactjs api authentication token

【解决方案1】：

您必须在每个请求中放入授权标头。参考这个答案 Sending the bearer token with axios

【讨论】：

【解决方案2】：

let url = "";

let body= {}

let header= {
    headers: {'Authorization': "Bearer " + yourToken}
};

axios.post(url, body, header)
 .then(res => {
   console.log(res)
 }).catch(err => {
   console.log(err)
 });

【讨论】：

仅代码的答案被认为是低质量的：请务必说明您的代码的作用以及它如何解决问题。如果您可以在帖子中添加更多信息，它将帮助提问者和未来的读者。另请参阅解释完全基于代码的答案：meta.stackexchange.com/questions/114762/…

【解决方案3】：

使用此模式将不记名身份验证令牌添加到 axios 实例的最简单方法

 let api = axios.create({
      baseURL: YOUR_BASE_urL,
      timeout: 7000,
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      }
    });

考虑的最佳方法是 JWT 身份验证令牌应该存储在 LocalStorage 并编写方法从 localStorage 获取令牌并将其分配给 axios 实例

function addToken() {
  api.defaults.headers.common['Authorization'] = !!localStorage.getItem('jwt') ? `Bearer ${localStorage.getItem('jwt')}` : '';
}

现在您有了 axios 实例和方法，您可以使用它从 localStorage 获取 Token 并分配给 axios 实例

还差一步

你只需要在向 axios 发出请求之前执行这个方法在创建 api 调用之前执行函数

addToken()

或者

您可以更喜欢直接向您的 axios 实例添加令牌

 let api = axios.create({
          baseURL: YOUR_BASE_urL,
          timeout: 7000,
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            'Authorization': "bearer " + token
          }
        });

【讨论】：