Реагируйте JS, как передавать значения между страницами, используя хранилище сеансов - PullRequest
Новая
       6

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

0 голосов
/ 12 мая 2018

У меня есть страница входа в 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.... Не могли бы вы мне помочь с тем, что я делаю не так?

1 Ответ

0 голосов
/ 12 мая 2018

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

.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
...