Аутентификација служи као заштитна баријера за софтверске апликације, проверава идентитет корисника и даје приступ заштићеним ресурсима. Међутим, захтевање од корисника да се више пута аутентификују, посебно у оквиру једне сесије, може довести до фрустрације, ометати продуктивност и уништити њихово целокупно искуство.

Да бисте превазишли овај изазов, можете да користите колачиће и складиште сесије да бисте сачували податке за аутентификацију корисника и друге персонализоване информације – омогућавајући корисницима да остану аутентификовани током сесије без потребе за сталном поновном аутентификацијом, што значи да се побољшава њихово искуство.

Управљање подацима о корисничким сесијама помоћу колачића и складиштења сесија

Управљање корисничким сесијама је кључни аспект изградње робусних и безбедних Реацт апликација. Правилно управљање подацима о сесији коришћењем колачића и складиштења сесија обезбеђује глатко и персонализовано корисничко искуство уз одржавање неопходних безбедносних мера.

Подаци о сесији корисника обично укључују информације које су специфичне за тренутну сесију корисника или интеракцију са апликацијом. Ови подаци могу да варирају у зависности од захтева и функционалности апликације, али обично укључују следеће:

• Информације у вези са аутентификацијом.
• Корисничке поставке и подешавања.
• Активност и историја корисника.

Колачићи су текстуалне датотеке које садрже мале делове података које чувају веб прегледачи на уређају корисника. Обично се користе за чување података о аутентификацији и свих других персонализованих корисничких информација, омогућавајући веб апликацијама да одржавају корисничке сесије у више сесија претраживача.

С друге стране, складиштење сесије—слично као локално складиште—је механизам за складиштење на страни клијента који пружају савремени претраживачи. За разлику од колачића, ограничен је на одређену сесију прегледања и доступан је само у оквиру исте картице или прозора. Складиштење сесија нуди једноставан и директан начин складиштења података специфичних за сесије за веб апликације.

И колачићи и складиште сесије играју кључну улогу у управљању подацима о сесији корисника. Колачићи су одлични у ситуацијама када је потребна постојаност података у више сесија. Насупрот томе, складиштење сесије је корисно када желите да изолујете податке у оквиру једне сесије прегледања, пружајући лагану и специфичну опцију складиштења.

Сада, хајде да истражимо како да рукујемо подацима о сесијама корисника, посебно фокусирајући се на чување информација о аутентификацији помоћу колачића и складиштења сесије.

Поставите Реацт пројекат

Започети, поставите Реацт пројекат користећи Вите. Затим инсталирајте ове пакете у свој пројекат.

нпм инсталл јс-цоокие реацт-роутер-дом

У идеалном случају, након што се корисник пријави и његови акредитиви буду успешно потврђени помоћу позадинског АПИ-ја за аутентификацију, колачићи и складиште сесије чувају токене за аутентификацију, идентификаторе сесије или било које друге релевантне податке током корисника седница.

Ови токени или идентификатори заједно са додатним подацима ускладиштеним у претраживачу корисника се аутоматски укључено у наредне захтеве упућене серверу ради верификације пре него што корисник може приступити заштићеном ресурси.

На овај начин, сесија корисника траје на више захтева – обезбеђујући беспрекорну интеракцију са апликацијом без потребе за поновном аутентификацијом за сваки захтев.

Овде можете пронаћи код овог пројекта ГитХуб спремиште.

Управљање подацима о сесији аутентификације корисника помоћу колачића

Да бисте демонстрирали како да користите колачиће за чување информација о аутентификацији корисника, само напред и креирајте нови компоненте/Логин.јск фајл у срц именик. Унутар ове датотеке додајте следећи код.

1. Направите следеће увозе.

   увоз { усеСтате } из'реаговати';
   увоз { усеНавигате } из'реаговати-рутер-дом';
   увоз Колачићи из'јс-цоокие';

2. Направите функционалну компоненту и додајте ЈСКС елементе за образац за пријаву.

   конст Логин = () => {
   конст [корисничко име, сетУсернаме] = усеСтате('');
   конст [пассворд, сетПассворд] = усеСтате('');
   повратак (
   
   
   
    типе="текст"
    плацехолдер="Корисничко име"
    валуе={корисничко име}
    онЦханге={(е) => сетУсернаме (е.таргет.валуе)}
    />
    типе="Лозинка"
    плацехолдер="Лозинка"
    вредност={лозинка}
    онЦханге={(е) => сетПассворд (е.таргет.валуе)}
    />
   "прихвати">Пријава</button>
    </form>
    );
   };
   извозУобичајено Пријавите се;

Пошто немамо позадински АПИ за аутентификацију корисничких акредитива, направићемо функцију која проверава податке које је корисник унео у формулар за пријаву користећи пробне корисничке акредитиве. Унутар функционалне компоненте додајте следећи код.

конст тестАутхДата = {
 корисничко име: 'тест',
 Лозинка: 'тест',
 }; 
конст аутхентицатеУсер = (корисничко име Лозинка) => {
ако (корисничко име тестАутхДата.усернаме && лозинка тестАутхДата.пассворд) { 
конст усерДата = {
 корисничко име,
 Лозинка,
 };
конст екпиратионТиме = НоваДатум(НоваДатум().гетТиме() + 60000);
 Цоокиес.сет('аутх', ЈСОН.стрингифи (усерДата), { истиче: екпиратионТиме });
повратакистина;
 }
повратаклажно;
 };
конст хандлеЛогин = (е) => {
 е.превентДефаулт();
конст исАутхентицатед = аутхентицатеУсер (корисничко име, лозинка);
ако (је аутентифициран) {
 навигација('/протецтед');
 } друго {
// Прикажи поруку о грешци или изврши друге радње за неуспелу аутентификацију
 }
 };

Унутар аутхентицатеУсер функција, проверава да ли се дато корисничко име и лозинка подударају са подацима теста за аутентификацију. Ако се акредитиви подударају, креира се а кориснички подаци објекат са корисничким именом и лозинком. Затим поставља време истека за колачић и чува кориснички подаци у колачићу по имену аутх помоћу Цоокиес.сет методом.

Након успешне аутентификације, корисник се преусмерава на заштићену страницу пошто је овлашћен за приступ заштићеним ресурсима. Чувањем информација о аутентификацији у колачић, успостављате активну корисничку сесију, дозвољавајући наредним захтевима да аутоматски укључе детаље о аутентификацији.

Ови подаци о корисничкој сесији омогућавају серверском коду да потврди идентитет корисника и овласти приступ привилегијама без потребе да се корисник поново аутентификује за сваки захтев.

Ажурирајте датотеку Апп.јск

Направите измене у Апп.јск фајл за руковање рутирањем корисника након успешне аутентификације

увоз { БровсерРоутер, Роуте, Роутес, усеНавигате } из'реаговати-рутер-дом';
увоз Колачићи из'јс-цоокие';
увоз Пријавите се из'./цомпонентс/Логин';
конст ПротецтедПаге = ({ ...одмор }) => {
конст исАутхентицатед = !!Цоокиес.гет('аутх');
конст навигате = усеНавигате();
конст хандлеЛогоут = () => { 
 Цоокиес.ремове('аутх');
 навигација('/Пријавите се'); 
 };
ако (!проверено) {
 навигација('/Пријавите се'); 
повратакнула; // Вратите нулл да бисте спречили приказивање било чега другог
 }
повратак (



фонтСизе: '24пк', боја: 'Плави' }}>Здраво, Свете!</h1>
маргинТоп: '10пк' }} онЦлицк={хандлеЛогоут}>
 Одјавити се
 </button>
 </div>
 );
};


конст Апп = () => {
повратак (


"/протецтед/*" елемент={} />
"/Пријавите се" елемент={} />
 </Routes>
 </BrowserRouter>
 );
};
извозУобичајено Апликација;

Код изнад поставља потребне компоненте и логику рутирања. Садржи дугме за одјаву које, када се притисне, брише колачић за аутентификацију и преусмерава корисника на страницу за пријаву.

Поред тога, проверава присуство колачића за аутентификацију и преусмерава кориснике на страницу за пријаву ако је одсутан. Међутим, ако је колачић присутан, ПротецтедПаге компонента приказује страницу која је доступна искључиво аутентификованим корисницима.

Коначно, покрените наредбу испод да бисте покренули развојни сервер и тестирали апликацију.

нпм рун дев

У свом претраживачу идите на http://127.0.0.1:5173/login,и унесите пробне акредитиве за аутентификацију. Након успешног пријављивања, генерише се нови колачић који садржи податке о сесији, који укључују информације о пробној аутентификацији.

Када колачић истекне или када кликнете на дугме за одјаву, колачић се брише. Ова радња ефективно завршава активну корисничку сесију и одјављује вас.

Чување података за аутентификацију корисника користећи складиште сесије

И складиште сесије и колачићи функционишу слично. Да бисте сачували потребне информације у меморији сесије претраживача, можете користити сессионСтораге.сетИтем методом.

 сессионСтораге.сетИтем('аутх', ЈСОН.стрингифи (усерДата));

Додавањем горње изјаве унутар аутхентицатеУсер функција у Пријавите се компоненту, можете сачувати податке о аутентификацији корисника у меморији сесије претраживача.

Истраживање додатних случајева употребе колачића и складиштења сесија

Овај водич је истакао како да користите колачиће и складиште сесије за складиштење акредитива за аутентификацију корисника. Без обзира на то, колачићи и складиште сесије нуде шири спектар могућности осим складиштења информација о аутентификацији.

Користећи ове функције, можете управљати додатним подацима о сесији, што доводи до безбеднијег и персонализованијег корисничког искуства.