#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. Нет проблем. Если вы удовлетворены ответом, не могли бы вы отметить его как принятый, пожалуйста. Спасибо.