Добавление токена jwt в запрос GET не работает в React - PullRequest
Новая
       9

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

0 голосов
/ 18 октября 2018

Чтобы получить данные из 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,
  })

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

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

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

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

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

0 голосов
/ 18 октября 2018

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

...