Заштићене руте су руте које омогућавају приступ само овлашћеним корисницима. То значи да корисници морају да испуне одређене услове да би могли да стигну до те одређене руте. На пример, ваша апликација може захтевати да само пријављени корисници посете страницу контролне табле.
У овом водичу ћете научити како да креирате заштићене руте у Реацт апликацијама.
Имајте на уму да ћете користити Реацт Роутер в6, који се мало разликује од претходних верзија.
почети
Да бисте започели, користите цреате-реацт-апп да покренете једноставну Реацт апликацију.
Отворите фасциклу Апликације са својим омиљеним уређивачем текста и очистите је. Ваша апп.јс би требало да изгледа овако.
подесите реагујући рутер
Користили бисте Реацт Роутер да подесите навигацију за вашу апликацију.
У навбар.јс, користите компоненту везе из реацт-роутер-дом да бисте креирали везе за навигацију за различите путање.
Креирање заштићених рута у Реацт-у
Следеће је креирање заштићених рута. Руте Почетна и О нама су јавне што значи да им свако може приступити, али руте профила захтевају од корисника да се прво аутентификују. Дакле, морате креирати начин за пријављене кориснике.
постављање лажне аутентификације
Пошто ово није водич за аутентификацију, користићете Реацт усестате куку да симулирате систем за пријаву.
Овде пратите статус пријаве корисника користећи стање. Имате два дугмета, дугме за пријаву и одјаву. Ова дугмад се приказују редом у зависности од тога да ли је корисник пријављен или не.
Ако је корисник одјављен, приказује се дугме за пријаву. Кликом на ово ће се покренути функција пријаве која ће ажурирати статус исЛоггедИн на труе и заузврат променити приказ са дугмета за пријаву на дугме за одјаву.
заштита приватних компоненти
Да би заштитиле руте, приватне компоненте морају имати приступ вредности исЛоггедИн. То можете учинити тако што ћете креирати нову компоненту која прихвата стање исЛоггедИн као проп и приватну компоненту као дете.
На пример, ако је ваша нова компонента названа “заштићена”, ви бисте приказали приватну компоненту попут ове.
Заштићена компонента ће проверити да ли је исЛоггедИн истинит или нетачан. Ако је тачно, наставиће се и вратити приватну компоненту. Ако је нетачан, преусмериће корисника на страницу на којој се може пријавити.
Сазнајте више о другим методама које можете да користите за приказивање компоненте на основу термина у овом чланку о условном рендеровању у Реацт-у.
У овој компоненти, иф наредба се користи за проверу да ли је корисник аутентификован или не. Ако нису, идите на реацт-роутер-дом их преусмерава на почетну страницу. Међутим, ако је корисник аутентификован, подређена компонента се приказује.
То је то када креирате заштићену руту. Сада можете приступити страници профила само када сте пријављени. Ако покушате да одете на страницу профила без пријављивања, бићете преусмерени на почетну страницу.
контрола приступа заснована на улогама
Овај водич вам је показао како можете ограничити неовлашћеним корисницима приступ страници у Реацт апликацији.
У неким случајевима, можда ћете морати да одете још даље и ограничите кориснике на основу њихових улога. На пример, можете имати страницу, као што је страница за аналитику, која даје само администраторски приступ. Овде ћете морати да додате логику заштићеној компоненти која проверава да ли корисник испуњава тражене услове.
