Добавление токена jwt в запрос GET не работает в React

чтобы получить данные из API, мне нужно отправить токен jwt в заголовке вызова. Я сохраняю его в локальном хранилище после того, как получу его в своем приложении, и когда я проверяю консоль браузера, я вижу, что сохранение работает - я вижу, как оно появляется в консоли, когда я делаю localStorage.getItem('token' ) там. Но когда я пытаюсь добавить его в свой вызов API, я получаю сообщение об ошибке, в котором jwt не найден. Очевидно, что запрос на получение выполняется до того, как будет выполнена моя логика получения токена из локального хранилища. Ниже приведен мой код. Любые советы о том, как обойти это, будут оценены. Спасибо !

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');

Я удалил константу AuthStr. поэтому мой запрос на получение сейчас:

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

Это должно было исправить опечатку, но ответ, который я получаю, все еще не найден jwt.


reactjs get jwt authorization fetch-api
person Milda Nor    schedule 18.10.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

кажется, что при инициализации константы AuthStr вы уже добавляете к ней строку Bearer :
const AuthStr = 'Bearer '.concat(token);.
затем, при настройке запроса, вы делаете это снова:
Authorization: "Bearer " + AuthStr.
так что то, что вы на самом деле отправляете, выглядит так: Bearer Bearer your token.
вы пытались создать экземпляр параметра AuthStr внутри функции getData() или componentDidMount()?

person Yoav    schedule 18.10.2018
comment
Привет, спасибо, что указали на эту проблему. Я избавился от повторяющейся переменной, но jwt все еще не найден. Я также обновил свой вопрос, чтобы отразить ваш ответ. - person Milda Nor; 18.10.2018
comment
попробуйте создать экземпляр параметра, который вы используете внутри функции getData(). возможно, область fetch не знает о них. - person Yoav; 18.10.2018
comment
Спасибо за ваш ответ. Как я мог это сделать? Извините, если это нубский вопрос. Я пробовал: когда я перемещаю свой const token = localStorage.getItem внутри функции getData() непосредственно перед fetch, я могу console.log(token) и он отображается правильно, но функция не может его использовать, и я получаю ответ no jwt found. Если я объявлю переменную токена вне функции getData() и консоль зарегистрирует ее в методе componentDidMount, я получаю значение токена null, поэтому я также не могу выполнить вызов. Я также пытался объявить переменную токена внутри componentDidMount, но я получаю, что токен не определен. - person Milda Nor; 18.10.2018

arrow_upward
2
arrow_downward

Спасибо за попытку помочь мне заставить это работать, @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())

Я даже могу определить переменную авторизации и получить токен в функции непосредственно перед выполнением выборки — вызов ее в componentdidmount также работал, но это не главная проблема.

Для всех, кто работает над этими часами, где вы помещаете токен в запрос!

person Milda Nor    schedule 19.10.2018