将 jwt 令牌添加到 GET 请求在 React 中不起作用

Posted 2023-03-10

【中文标题】将 jwt 令牌添加到 GET 请求在 React 中不起作用

【英文标题】：Adding jwt token to GET request not working in React

【发布时间】：2019-03-23 01:32:54

【问题描述】：

为了从 API 获取数据，我需要在调用的标头中发送一个 jwt 令牌。在我的应用程序中获取它后，我将它保存在本地存储中，当我在浏览器的控制台中检查时，我可以看到保存它有效 - 当我执行 localStorage.getItem('token' 时，我可以看到它出现在控制台中） 那里。但是当我尝试将它添加到我的 API 调用中时，我收到了 no jwt found 错误。显然，在执行从本地存储中获取令牌的逻辑之前，正在执行获取请求。下面是我的代码。任何有关如何解决此问题的建议将不胜感激。谢谢 ！

const url = 'https://url.com';
const token = localStorage.getItem('token');
const AuthStr = 'Bearer '.concat(token);

export default class TestCall extends React.Component 
constructor(props) 
    super(props);
    this.state = 
      error: undefined,
      isLoaded: false,
      items: [],
    ;

   this.getData = this.getData.bind(this);
  
  componentDidMount() 
    this.getData();
  

  getData () 
  return fetch(url, 
    method: 'GET',
    headers:
      Accept: 'application/json',
               'Content-Type': 'application/json',
       ,
           Authorization: "Bearer " + AuthStr,
  )
      .then(res => res.json())
      .then(
        (result) => 

          this.setState(
            isLoaded: true,
            items: result
          );
        ,
        (error) => 
          this.setState(
            isLoaded: true,
            error
          );
        
      )
  


  render() 
    const  error, isLoaded, items  = this.state;
    if (error) 
      return <div>Error: error.message</div>;
     else if (!isLoaded) 
      return <div>Loading...</div>;
     else 
      return (
       <p>items </p>
      );
    
  

更新：

根据我收到的答案，我将顶部的代码更改为：

const token = localStorage.getItem('token');

我删除了 const AuthStr。 所以我现在的获取请求是：

headers:
Accept: 'application/json',
         'Content-Type': 'application/json',
       ,
           Authorization: "Bearer " + token,
  )

这应该已经修正了错字，但我得到的响应仍然没有找到 jwt。

【参考方案1】：

似乎在初始化 const AuthStr 时，您已经在其中添加了 Bearer 字符串：const AuthStr = 'Bearer '.concat(token);。 然后，在设置请求时，您将再次执行此操作：Authorization: "Bearer " + AuthStr. 所以您实际发送的内容如下所示：Bearer Bearer your token. 您是否尝试过在getData() 函数或componentDidMount() 中实例化AuthStr 参数？

【讨论】：

您好，感谢您指出这个问题。我已经摆脱了重复的变量，但仍然没有找到 jwt。我还更新了我的问题以反映您的回答。

请尝试实例化您在getData() 函数中使用的参数。 fetch 范围可能不知道它们。

感谢您的回复。我怎么能那样做？对不起，如果这是一个菜鸟问题。我试过：当我将我的const token = localStorage.getItem 移动到getData() 函数内时，就在fetch 之前，我可以console.log(token) 并且它显示正确，但该函数无法使用它，我得到没有找到jwt 的响应。如果我在 getData() 函数之外声明令牌变量并将其登录到 componentDidMount 方法中，我将获得令牌值 null，因此我也无法进行调用。我也尝试在 componentDidMount 中声明令牌变量，但我得到令牌未定义。

【参考方案2】：

感谢您尝试帮助我完成这项工作@Yoav！

但是，问题似乎出在其他地方 - 我没有在获取请求的正确位置添加令牌。

有效的代码是这样的：

getData()
let auth =  localStorage.getItem('user_token');
      return fetch(url, 
       method: 'GET',
       headers:
         Accept: 'application/json',
                  'Content-Type': 'application/json',
                  'Authorization': "Bearer " + auth,
          ,
     )
         .then(res => res.json())

我什至可以在执行 fetch 之前定义 auth 变量并在函数中获取令牌 - 在 componentdidmount 中调用它也可以，但这不是主要问题。

对于在此手表上工作的其他人，您将令牌放入请求中！