React JS, как передавать значения между страницами, используя хранилище сеансов

У меня есть страница входа в JS, которая принимает имя пользователя и пароль. После ввода имени пользователя и пароля учетные данные обрабатываются в файле json (API), который генерирует токен для клиента. Моя цель — передать токен на целевую страницу после того, как клиент войдет в систему, и заполнить раскрывающийся список соответствующими данными клиента. Проблема, с которой я столкнулся, заключается в том, чтобы передать токен клиента с моей страницы входа на целевую страницу.

На моей странице входа я использую Fetch для извлечения токена из API, а затем сохраняю токен, используя хранилище сеансов. Фрагмент кода для получения токена:

componentDidMount() {  
        this.fetchData(); 
    } 

    //request the token
    fetchData() {
        return fetch('http://myapiaut:1111/api/auth', {
            method: 'POST',
            headers: {
                'Content-type': 'application/json',
            },
             body: JSON.stringify({
                username: 'myAdminusername',
                password: 'myAdminPassword',
                Authorization: 'myAdminPassword',
            })
        }) /*end fetch */
        .then(results => results.json())
        .then(data => {
            this.setState({ data: data })
            sessionStorage.setItem("token", data)
          })
        }

      //authenticate request
      requestUserInfo() {
        var token = sessionStorage.getItem("token");
        return fetch('http://myapiaut:1111/api/auth', {
          method: 'GET',
          headers: new Headers({
            Authorization: 'Bearer' + sessionStorage.token
          }),
        })
          .then((response) => response.json());
      }

Целевая страница

componentDidMount() {
        fetch('http://myapiclients:22222/api/clients', {
            method: 'GET',
            headers: {
                'Content-type': 'application/json',
                'Authorization': 'Bearer ' + sessionStorage.token
            },
        })
        .then(results => results.json())
        .then(data => this.setState({ data: data }))
    }

...вернувшись на страницу входа, я подтвердил, что получаю токен через функцию fetchData, но проблема, с которой я столкнулся, заключается в правильном хранении токена, чтобы его можно было передать на целевую страницу.

К вашему сведению: я уже создал целевую страницу, и она работает должным образом, когда я вручную копирую сгенерированный токен в раздел авторизации в Fetch. ...Может, мне помочь, что я делаю неправильно?


reactjs javascript api session-storage
person user1724708    schedule 12.05.2018    source источник
comment
Сохраняется ли токен в хранилище сеансов?   -  person Agney    schedule 12.05.2018
comment
Вход и посадка на разных доменах? если нет, то почему бы не использовать sessionStorage.getItem как раньше?   -  person Femi Oni    schedule 12.05.2018
comment
@Boy With Silver Wings - нет, и это то, с чем я борюсь (сохранение токена в хранилище сеансов) ... Я просмотрел свой синтаксис, но, похоже, не могу понять, почему токен не сохраняется. Во фрагменте страницы входа я попытался запустить console.log, чтобы узнать, захватывается ли токен, но получил сообщение о том, что он недоступен (в строке, где я написал в console.log). Я использую console.log (см. функцию requestUserInfo) в правильном разделе? Пожалуйста, дайте мне знать, если у вас есть какие-либо предложения, я все еще новичок в React. обе страницы (один и тот же домен)   -  person user1724708    schedule 12.05.2018

Ответы (1)


arrow_upward
3
arrow_downward

Проблема здесь:

.then(data => this.setState({ data: data }))
.then(data => sessionStorage.setItem('token', data))

setState не разрешает Promise, поэтому у него нет then()

Измените его на что-то вроде:

.then(data => {
  this.setState({ data: data })
  sessionStorage.setItem('token', data)
})

На целевой странице:

componentDidMount() {
        fetch('http://myapiclients/api/clients', {
            method: 'GET',
            headers: {
                'Content-type': 'application/json',
                'Authorization': 'Bearer ${token}'  // token is not defined!
            },
        })
        .then(results => results.json())
        .then(data => this.setState({ data: data }))
    }

токен не определен, поэтому он будет «Bearer undefined», либо определите его перед fetch(...) с sessionStorage.getItem("token"), либо в заголовках выборки сделайте что-то вроде:

'Authorization': 'Bearer ' + sessionStorage.token
person StackedQ    schedule 12.05.2018