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

Posted 2023-02-22

【中文标题】在 React 项目中，我应该在哪里传递 Bearer Authentication Token？

【英文标题】：Where should I pass the Bearer Authentication Token in a React project?

【发布时间】：2020-02-12 01:09:59

【问题描述】：

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

【问题讨论】：

我尝试使用：axios.get(API_URL, headers: "Authorization" : client_token ) 但我收到一个错误：请求失败，状态码为 405

嗨，欢迎来到 ***！最好有一些上下文，以便更好地提供帮助：您在哪里找到这个令牌？ BTW 错误 405 表示你尝试了错误的 http 方法：可能是 GET 而不是 POST，或者类似的错误

【参考方案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
          
        );