Удостоверяването служи като защитна бариера за софтуерни приложения, като проверява самоличността на потребителите и предоставя достъп до защитени ресурси. Въпреки това, изискването на потребителите да се удостоверяват многократно, особено в рамките на една сесия, може да доведе до разочарование, да попречи на производителността и да съсипе цялостното им изживяване.

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

Управление на данните за потребителските сесии с помощта на бисквитки и съхранение на сесии

Управлението на потребителските сесии е решаващ аспект от изграждането на стабилни и сигурни React приложения. Правилното управление на данните за сесиите с помощта на бисквитки и съхранение на сесии гарантира гладко и персонализирано потребителско изживяване, като същевременно поддържа необходимите мерки за сигурност.

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

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

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

От друга страна, съхраняване на сесии—подобно на локалното съхранение— е механизъм за съхранение от страна на клиента, предоставен от съвременните браузъри. За разлика от бисквитките, тя е ограничена до конкретна сесия на сърфиране и е достъпна само в рамките на същия раздел или прозорец. Съхранението на сесията предлага лесен и лесен начин за съхраняване на специфични за сесията данни за уеб приложения.

Както бисквитките, така и съхранението на сесии играят решаваща роля при управлението на данните за потребителските сесии. Бисквитките са страхотни в ситуации, когато се изисква постоянство на данните в множество сесии. За разлика от това, съхранението на сесии е предимство, когато искате да изолирате данни в рамките на една сесия на сърфиране, като предоставя лека и специфична опция за съхранение.

Сега нека проучим как да обработваме данните за потребителските сесии, като се фокусираме по-специално върху съхраняването на информация за удостоверяване с помощта на бисквитки и съхранение на сесии.

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

За да започнете, настройте React проект с помощта на Vite. След това инсталирайте тези пакети във вашия проект.

npm инсталирайте js-cookie react-router-dom

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

Тези токени или идентификатори заедно с допълнителните данни, съхранявани в браузъра на потребителя, се автоматично включени в последващи заявки, отправени към сървъра за проверка, преди потребителят да има защитен достъп ресурси.

По този начин сесията на потребителя продължава в множество заявки, като се гарантира безпроблемно взаимодействие с приложението, без да се налага повторно удостоверяване за всяка заявка.

Можете да намерите кода на този проект тук GitHub хранилище.

Управление на данните от сесията за удостоверяване на потребителя с помощта на бисквитки

За да демонстрирате как да използвате бисквитки за съхраняване на информация за удостоверяване на потребителите, продължете и създайте нова компоненти/Login.jsx файл в src указател. Вътре в този файл добавете следния код.

1. Направете следните импорти.

   импортиране {useState} от"реагира";
   импортиране {useNavigate} от'react-router-dom';
   импортиране Бисквитки от'js-бисквитка';

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

   конст Вход = () => {
   конст [потребителско име, setUsername] = useState('');
   конст [парола, setPassword] = useState('');
   връщане (
   
   
   
    тип="текст"
    заместител ="Потребителско име"
    стойност={потребителско име}
    onChange={(e) => setUsername (e.target.value)}
    />
    тип="парола"
    заместител ="Парола"
    стойност={парола}
    onChange={(e) => setPassword (e.target.value)}
    />
   "Изпращане">Вход</button>
    </form>
    );
   };
   износпо подразбиране Влизам;

Тъй като нямаме backend API за удостоверяване на потребителски идентификационни данни, ще създадем функция, която проверява данните, въведени от потребителя във формуляра за вход, като използва тестови потребителски идентификационни данни. Във функционалния компонент добавете следния код.

конст testAuthData = {
 потребителско име: 'тест',
 парола: 'тест',
 }; 
конст authenticateUser = (потребителско име, парола) => {
ако (потребителско име testAuthData.username && парола testAuthData.password) { 
конст потребителски данни = {
 потребителско име,
 парола,
 };
конст expirationTime = новДата(новДата().getTime() + 60000);
 Cookies.set("auth", JSON.stringify (userData), { изтича: expirationTime });
връщаневярно;
 }
връщаненевярно;
 };
конст handleLogin = (д) => {
 e.preventDefault();
конст isAuthenticated = authenticateUser (потребителско име, парола);
ако (isAuthenticated) {
 навигация('/защитен');
 } друго {
// Показване на съобщение за грешка или извършване на други действия за неуспешно удостоверяване
 }
 };

Вътре в authenticateUser функция, тя проверява дали предоставените потребителско име и парола съответстват на данните за тестово удостоверяване. Ако идентификационните данни съвпадат, той създава a потребителски данни обект с потребителско име и парола. След това задава време за изтичане на бисквитката и съхранява потребителски данни в бисквитка с име авт използвайки Cookies.set метод.

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

Тези данни за потребителска сесия позволяват на кода на сървъра да потвърди самоличността на потребителя и да разреши достъп до привилегии, без да изисква потребителят да се удостоверява повторно за всяка заявка.

Актуализирайте файла App.jsx

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

импортиране { BrowserRouter, Route, Routes, useNavigate } от'react-router-dom';
импортиране Бисквитки от'js-бисквитка';
импортиране Влизам от'./components/Login';
конст ProtectedPage = ({ ...Почивка }) => {
конст isAuthenticated = !!Cookies.get("auth");
конст навигация = useNavigate();
конст handleLogout = () => { 
 Cookies.remove("auth");
 навигация('/Влизам'); 
 };
ако (!isAuthenticated) {
 навигация('/Влизам'); 
връщаненула; // Върнете null, за да предотвратите изобразяването на нещо друго
 }
връщане (



размер на шрифта: "24px", цвят: 'син' }}>Здравей, свят!</h1>
marginTop: "10px" }} onClick={handleLogout}>
 Излез от профила си
 </button>
 </div>
 );
};


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


"/защитен/*" елемент={} />
"/Влизам" елемент={} />
 </Routes>
 </BrowserRouter>
 );
};
износпо подразбиране Приложение;

Кодът по-горе настройва необходимите компоненти и логиката на маршрутизиране. Той включва бутон за излизане, който при натискане изтрива бисквитката за удостоверяване и пренасочва потребителя към страницата за вход.

Освен това той проверява наличието на бисквитка за удостоверяване и пренасочва потребителите към страницата за вход, ако тя липсва. Въпреки това, ако бисквитката присъства, ProtectedPage изобразява страница, която е изключително достъпна за удостоверени потребители.

Накрая изпълнете командата по-долу, за да завъртите сървъра за разработка, за да тествате приложението.

npm стартиране dev

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

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

Съхраняване на данни за удостоверяване на потребител чрез съхранение на сесии

Както съхранението на сесията, така и бисквитките функционират по подобен начин. За да съхраните необходимата информация в хранилището за сесии на браузъра, можете да използвате sessionStorage.setItem метод.

 sessionStorage.setItem("auth", JSON.stringify (userData));

Като добавите изявлението по-горе вътре в authenticateUser функция в Влизам компонент, можете да съхранявате данните за удостоверяване на потребителя в хранилището на сесията на браузъра.

Проучване на допълнителни случаи на използване на бисквитки и съхранение на сесии

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

Като използвате тези функции, можете да управлявате допълнителни данни за сесията, което води до по-сигурно и персонализирано потребителско изживяване.