Один из способов получить CSRF токен в React-приложении - это отправить запрос на сервер для получения токена и сохранить его в состоянии компонента или в контексте приложения.
Вы можете использовать библиотеку axios (или любую другую для отправки HTTP запросов) для выполнения запроса на сервер. В примере ниже, отправляется GET запрос для получения CSRF токена:
```jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
const [csrfToken, setCsrfToken] = useState('');
useEffect(() => {
const fetchCsrfToken = async () => {
try {
const response = await axios.get('/csrf-token-endpoint');
const token = response.data.token;
setCsrfToken(token);
} catch (error) {
// обработка ошибок
}
};
fetchCsrfToken();
}, []);
return (
<div>
<h1>CSRF Token: {csrfToken}</h1>
</div>
);
};
export default App;
```
В этом примере запрос отправляется при первой отрисовке компонента с использованием useEffect хука. После получения токена, он сохраняется в состоянии компонента через setCsrfToken.
Вы можете использовать этот токен для передачи его в заголовке каждого запроса на сервер:
```jsx
axios.interceptors.request.use((config) => {
config.headers['X-CSRF-Token'] = csrfToken;
return config;
});
```
В этом примере используется axios.interceptors, чтобы добавить CSRF токен в заголовок перед отправкой запроса на сервер. Обратите внимание, что csrfToken должен быть доступен на этом этапе, например, через состояние компонента или контекст приложения.
Вариант получения токена при инициализации стора и сохранения его там также может быть хорошим подходом. В этом случае, CSRF токен будет доступен глобально в вашем приложении, и вы сможете легко использовать его в любом месте, где это необходимо.
Независимо от того, какой способ вы выберете, важно помнить о безопасности данных. Обязательно проверьте полученный CSRF токен на сервере, чтобы убедиться, что он действительный и соответствует текущему пользователю.