Question

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

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。

Answer 1

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

Answer 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中调用它也可以工作，但这不是主要问题。

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

将jwt令牌添加到GET请求中无法在React中运行

2 个答案: