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

Чтобы преодолеть эту проблему, вы можете использовать файлы cookie и хранилище сеансов для сохранения данных аутентификации пользователя и других персонализированных данных. информации — позволяя пользователям оставаться аутентифицированными на протяжении всего сеанса без необходимости постоянной повторной аутентификации, следовательно, улучшая их опыт.

Управление данными сеанса пользователя с помощью файлов cookie и хранилища сеансов

Управление сеансами пользователей — важнейший аспект создания надежных и безопасных приложений React. Надлежащее управление данными сеанса с использованием файлов cookie и хранилища сеансов обеспечивает бесперебойную и персонализированную работу пользователей при соблюдении необходимых мер безопасности.

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

• Информация, связанная с аутентификацией.
• Пользовательские предпочтения и настройки.
• Активность и история пользователей.

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

С другой стороны, хранилище сеансов — аналогично локальному хранилищу— механизм хранения на стороне клиента, предоставляемый современными браузерами. В отличие от файлов cookie, они ограничены определенным сеансом просмотра и доступны только в той же вкладке или окне. Хранилище сеансов предлагает простой и понятный способ хранения данных, относящихся к сеансу, для веб-приложений.

И файлы cookie, и хранилище сеансов играют решающую роль в управлении данными сеанса пользователя. Файлы cookie отлично подходят в ситуациях, когда требуется сохранение данных в течение нескольких сеансов. Напротив, хранение сеанса выгодно, когда вы хотите изолировать данные в рамках одного сеанса просмотра, предоставляя облегченный и конкретный вариант хранения.

Теперь давайте рассмотрим, как обрабатывать данные сеанса пользователя, уделяя особое внимание хранению данных аутентификации с использованием файлов cookie и хранилища сеансов.

Настройте проект React

Для начала, настроить проект React с помощью Vite. Затем установите эти пакеты в свой проект.

npm установить js-cookie

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

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

Таким образом, сеанс пользователя сохраняется при нескольких запросах, обеспечивая беспрепятственное взаимодействие с приложением без необходимости повторной аутентификации для каждого запроса.

Вы можете найти код этого проекта в этом Репозиторий GitHub.

Управление данными сеанса аутентификации пользователя с помощью файлов cookie

Чтобы продемонстрировать, как использовать файлы cookie для хранения аутентификационной информации пользователей, создайте новый компоненты/Логин.jsx файл в источник каталог. Внутри этого файла добавьте следующий код.

1. Сделайте следующий импорт.

   Импортировать { состояние использования } от«реагировать»;
   Импортировать { использовать навигацию } от'реакция-маршрутизатор-дом';
   Импортировать Печенье от'js-куки';

2. Создайте функциональный компонент и добавьте элементы JSX для формы входа.

   константа Логин = () => {
   константа [имя пользователя, setUsername] = useState('');
   константа [пароль, setPassword] = useState('');
   возвращаться (
   
   
   
    тип="текст"
    заполнитель ="Имя пользователя"
    значение = {имя пользователя}
    onChange={(e) => setUsername (e.target.value)}
    />
    тип="пароль"
    заполнитель ="Пароль"
    значение = {пароль}
    onChange={(e) => setPassword (e.target.value)}
    />
   "представлять на рассмотрение">Войти</button>
    </form>
    );
   };
   экспортпо умолчанию Авторизоваться;

Поскольку у нас нет внутреннего API для аутентификации учетных данных пользователя, мы создадим функцию, которая проверяет данные, введенные пользователем в форме входа, с использованием тестовых учетных данных пользователя. Внутри функционального компонента добавьте следующий код.

константа testAuthData = {
 имя пользователя: 'тест',
 пароль: 'тест',
 }; 
константа аутентифицировать пользователя = (имя пользователя Пароль) => {
если (имя пользователя testAuthData.username && пароль testAuthData.password) { 
константа пользовательские данные = {
 имя пользователя,
 пароль,
 };
константа время истечения = новыйДата(новыйДата().получить время() + 60000);
 Cookies.set('авторизация', JSON.stringify (данные пользователя), { истекает: Время истечения });
возвращатьсяистинный;
 }
возвращатьсяЛОЖЬ;
 };
константа дескрипторЛогин = (е) => {
 e.preventDefault();
константа isAuthenticated = authenticationUser (имя пользователя, пароль);
если (проверено) {
 навигация('/ защищено');
 } еще {
// Показать сообщение об ошибке или выполнить другие действия при неудачной аутентификации
 }
 };

Внутри аутентифицировать пользователя функция, она проверяет, совпадают ли предоставленные имя пользователя и пароль с тестовыми данными аутентификации. Если учетные данные совпадают, он создает данные пользователя объект с именем пользователя и паролем. Затем он устанавливает время истечения срока действия файла cookie и сохраняет данные пользователя в файле cookie с именем авторизация используя Cookies.set метод.

После успешной аутентификации пользователь перенаправляется на защищенную страницу, поскольку ему разрешен доступ к защищенным ресурсам. Сохраняя информацию об аутентификации в файле cookie, вы устанавливаете активный пользовательский сеанс, позволяя автоматически включать данные аутентификации в последующие запросы.

Эти данные сеанса пользователя позволяют серверному коду проверять личность пользователя и разрешать доступ к привилегиям, не требуя от пользователя повторной аутентификации для каждого запроса.

Обновите файл App.jsx

Внесите изменения в App.jsx файл для обработки маршрутизации пользователей после успешной аутентификации

Импортировать { BrowserRouter, Route, Routes, useNavigate} от'реакция-маршрутизатор-дом';
Импортировать Печенье от'js-куки';
Импортировать Авторизоваться от'./компоненты/Войти';
константа Защищенная страница = ({ ...отдых }) => {
константа isAuthenticated = !!Cookies.get('авторизация');
константа перейти = использоватьNavigate();
константа обработать выход из системы = () => { 
 Куки.удалить('авторизация');
 навигация('/авторизоваться'); 
 };
если (!Проверено) {
 навигация('/авторизоваться'); 
возвращатьсянулевой; // Возвращаем null, чтобы предотвратить рендеринг чего-либо еще
 }
возвращаться (



размер шрифта: "24 пикселя", цвет: 'синий' }}>Привет, мир!</h1>
полеВерх: «10 пикселей» }} onClick={handleLogout}>
 Выйти
 </button>
 </div>
 );
};


константа Приложение = () => {
возвращаться (


"/защищено/*" элемент={} />
"/авторизоваться" элемент={} />
 </Routes>
 </BrowserRouter>
 );
};
экспортпо умолчанию Приложение;

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

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

Наконец, запустите приведенную ниже команду, чтобы запустить сервер разработки для тестирования приложения.

нпм запустить разработчик

В браузере перейдите к http://127.0.0.1:5173/loginи введите учетные данные тестовой аутентификации. После успешного входа в систему создается новый файл cookie, содержащий данные сеанса, в том числе информацию о проверке подлинности.

По истечении срока действия файла cookie или при нажатии кнопки выхода файл cookie удаляется. Это действие эффективно завершает активный сеанс пользователя и выполняет выход из системы.

Хранение данных аутентификации пользователя с использованием хранилища сеансов

И хранилище сеансов, и файлы cookie работают одинаково. Чтобы сохранить необходимую информацию в хранилище сеансов браузера, вы можете использовать sessionStorage.setItem метод.

 sessionStorage.setItem('авторизация', JSON.stringify (данные пользователя));

Добавив оператор выше внутри аутентифицировать пользователя функция в Авторизоваться компонент, вы можете хранить данные аутентификации пользователя в хранилище сеансов браузера.

Изучение дополнительных вариантов использования файлов cookie и хранилища сеансов

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

Используя эти функции, вы можете управлять дополнительными данными сеанса, что обеспечивает более безопасный и персонализированный пользовательский интерфейс.