Блог

У меня есть существующее приложение, в котором REST API уже разработаны. Я подумываю о разработке интерфейса с использованием React JS, и интерфейс должен вызывать мои REST API с каждым запросом.

Однако, когда я вхожу в свое приложение, генерируется токен, который передается на все последующие запросы в качестве заголовка аутентификации. Как я могу добиться этого с помощью React? Я новичок в React.

Вы можете использовать axios как библиотеку и добавлять это в качестве конфигурации

 axios.defaults.headers.common['Authorization'] = `Bearer ${token}` 
  

https://www.npmjs.com/package/axios

Используйте выборку. Пример:

 var data = {myData: 'hello'}; // or just 'hello'

fetch(YOUR_URL, {
  method: 'POST', // or GET
  body: JSON.stringify(data), // data can be string or object
  headers:{
    'Authorization': YOUR_TOKEN,
    // ... add other header lines like: 'Content-Type': 'application/json'
  }
}).then(res => res.json()) // if response is json, for text use res.text()
.then(response => console.log('Response:', JSON.stringify(response))) // if text, no need for JSON.stringify
.catch(error => console.error('Error:', error));
  

Сначала получите токен и сохраните его в локальном хранилище вашего браузера, используя localStorage.setItem('token', JSON.stringify(userToken));

Затем каждый раз, когда вы отправляете запрос, вы получаете этот токен из своего локального хранилища с помощью localStorage.getItem("token")

После этого, если бы вы отправляли объект со значением ключа ID: 1, вы бы сделали:

 await fetch("your_API_endpoint", {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', "Authorization": localStorage.getItem("token")  },
                            body: JSON.stringify({'ID': '1'})
                        })