как сохранить токен-носитель в файлах cookie в интерфейсе react js

#reactjs #cookies #jwt #bearer-token

#reactjs #файлы cookie #jwt #токен-носитель

Вопрос:

Я использую React JS для интерфейсной части моего кода. Я хочу сохранить токен-носитель в файлах cookie, а затем вернуть токен-носитель в поле содержимого при успешном вызове API. Поскольку я ранее не использовал файлы cookie, поэтому хочу знать, как я могу выполнить эту задачу. Также я не выполняю внутреннюю часть. Ниже приведен код, в котором я вызываю API

 onSubmitSignup = () => {
    fetch('https://cors-anywhere.herokuapp.com/http://35.154.16.105:8080/signup/checkMobile',{
        method:'post',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({
            mobile:this.state.mobile
        })
    })
    .then(response => response.json())
    .then(data =>{
        if(data.statusCode === '2000'){
            localStorage.setItem('mobile',this.state.mobile);
            // this.props.loadNewUser(this.state.mobile);
            this.props.onRouteChange('otp','nonav');
        }
    })
    // this.props.onRouteChange('otp','nonav');
}
  

Ответ №1:

Прежде всего, в этой строке:

 if(data.statusCode === '2000'){
  

Вы уверены, что код состояния не должен быть 200, а не 2000.

Во-вторых, существуют пакеты для управления файлами cookie. На ум приходит следующее:

Ссылка на репозиторий GitHub «Universal Cookie»

Однако вы можете использовать vanilla js для управления файлами cookie, более подробную информацию можно найти на веб-сайте Mozilla:

Здесь

Когда вы выполняете этот первоначальный вызов API, в возвращаемых данных я предполагаю, что токен-носитель также возвращается. Инициализируйте файл cookie там следующим образом:

 document.cookie = "Bearer=example-bearer-token;"
  

Если вам понадобится доступ к файлу cookie позже, вы можете просто использовать следующий код:

 const cookieValue = document.cookie
  .split('; ')
  .find(row => row.startsWith('Bearer'))
  .split('=')[1];
  

А затем перенаправить носитель со следующим вызовом.

Редактировать

Установите токен-носитель cookie следующим образом:

 document.cookie = "Bearer=example-bearer-token;"
  

Получите токен-носитель cookie следующим образом:

 const cookieValue = document.cookie
.split('; ')
.find(row => row.startsWith('Bearer'))
.split('=')[1];
  

Файл cookie состоит из пар ключ / значение, разделенных точкой с запятой. Поэтому приведенный выше код для получения значения «на предъявителя» сначала получает файл cookie, разбивает его на пары ключ / значение, находит строку с ключом «на предъявителя» и разбивает эту строку для получения токена на предъявителя.

В своем комментарии вы говорите, что команда разработчиков заявила, что носитель будет в «контенте». В вашем запросе ajax у вас уже есть доступ к этому контенту через data. Вам нужно отладить этот запрос, чтобы узнать, как он возвращается. Я предполагаю, что вам просто нужно извлечь токен из возвращаемых данных внутри блока «If», где вы проверяете свой StatusCode.

Это будет что-то вроде:

 document.cookie = "Bearer="   data.bearer;
  

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

Комментарии:

1. Серверная команда сообщила мне, что при успешной проверке код состояния будет равен 2000. И токен-носитель будет возвращен в поле «содержимое» после успешной проверки. Теперь я хочу знать, как я могу сохранить токен в файлах cookie в интерфейсной части (ReactJS). Также не могли бы вы объяснить мне, как я получу этот токен на предъявителя = example-bearer-token;

2. Отредактировал мой ответ. Смотрите внизу под заголовком «Редактировать».

3. ОК. Большое вам спасибо

4. Нет проблем. Если вы удовлетворены ответом, не могли бы вы отметить его как принятый, пожалуйста. Спасибо.