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

У овом водичу ћете научити како да креирате заштићене руте у Реацт апликацији.

Имајте на уму да ћете користити Реацт Роутер в6, који се мало разликује од претходних верзија.

Почетак

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

нпк цреате-реацт-апп протецт-роутес-реацт

Идите до фасцикле која је управо креирана и покрените апликацију.

ЦД заштита-руте-реаговати
нпм старт

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

фунцтион Апп() {
 повратак ;
}
извоз подразумеване апликације;

Сада сте спремни за постављање рута.

Повезан: Како да направите своју прву Реацт апликацију са ЈаваСцрипт-ом

Подешавање Реацт рутера

Користићете Реацт Роутер да подесите навигацију за своју апликацију.

Инсталирај реаговати-рутер-дом.

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

За ову апликацију, имаћете три главне странице:

• Почетна страница (одредишна страница).
• Страница профила (заштићена, тако да само пријављени корисници имају приступ).
• О страници (јавна тако да свако може да јој приступи).

Ин Навбар.јс, користити Линк компонента из реаговати-рутер-дом да креирате навигационе везе до различитих путања.

цонст { Линк } = рекуире("реацт-роутер-дом");
цонст Навбар = () => {
 повратак (

 );
};
извоз подразумевани Навбар;

Ин апп.јс креирајте руте које одговарају везама у менију за навигацију.

импорт { БровсерРоутер ас Роутер, Роутес, Роуте } из "реацт-роутер-дом";
импорт Навбар из "./Навбар";
импорт Хоме фром "./Хоме";
импорт Профиле из "./Профиле";
импорт Абоут фром "./Абоут";
фунцтион Апп() {
 повратак (



} />
} />
} />


 );
}
извоз подразумеване апликације;

Сада морате да креирате компоненте на које сте референцирали Апп.јс.

Ин Хоме.јс:

цонст Почетна = () => {
 повратак 
Почетна страница
;
};
извоз подразумевани Почетна;

Ин Профиле.јс

цонст Профил = () => {
 повратак 
Профил страница
;
};
извоз подразумеваног профила;

Ин Абоут.јс

цонст О = () => {
 повратак 
О страници
;
};
екпорт дефаулт Абоут;

Креирање заштићених рута у Реацт-у

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

Подешавање лажне аутентификације

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

Ин Апп.јс, додајте следеће.

импорт { Роутес, Роуте, БровсерРоутер } из "реацт-роутер-дом";
импорт { усеСтате } из "реацт";
// Остале увозне изјаве
фунцтион Апп() {
 цонст [исЛоггедИн, сетисЛоггедИн] = усеСтате (нулл);
 цонст логИн = () => {
 сетисЛоггедИн (труе);
 };
 цонст логОут = () => {
 сетисЛоггедИн (фалсе);
 };
 повратак (


 {исЛоггедИн? (
Одјавити се
 ): (
Пријавите се
 )}



 );
}
извоз подразумеване апликације;

Овде пратите статус пријаве корисника који користи стање. Имате два дугмета, дугме за пријаву и дугме за одјаву. Ова дугмад се приказују у зависности од тога да ли је корисник пријављен или не.

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

Повезан: Шта је аутентификација корисника и како функционише?

Заштита приватних компоненти

Да би заштитиле руте, приватне компоненте такође морају имати приступ исЛоггедИн вредност. То можете учинити тако што ћете креирати нову компоненту која прихвата исЛоггедИн држава као реквизит и приватна компонента као дете.

На пример, ако је ваша нова компонента названа "Заштићена", ви бисте приказали приватну компоненту попут ове.

Заштићена компонента ће проверити да ли исЛоггедИн је истинито или нетачно. Ако је тачно, наставиће се и вратити Приватну компоненту. Ако је нетачан, преусмериће корисника на страницу на којој се могу пријавити.

Сазнајте више о другим начинима на које можете да прикажете компоненту у зависности од услова од овог чланка надаље условно приказивање у Реацт-у.

У својој апликацији креирајте Протецтед.јс.

импорт { Навигате } фром "реацт-роутер-дом";
цонст Заштићено = ({ исЛоггедИн, деца }) => {
 иф (!исЛоггедИн) {
 повратак ;
 }
 повратак деце;
};
извоз подразумевано Заштићено;

У овој компоненти, иф наредба се користи за проверу да ли је корисник аутентификован. ако нису, Навигација из реаговати-рутер-дом преусмерава их на почетну страницу. Међутим, ако је корисник аутентификован, подређена компонента се приказује.

Користите Протецтед.јс ин Апп.јс модификовати Профил рута странице.

 патх="/профиле"
 елемент={



 }
/>

Апп.јс требало би да изгледа овако.

импорт { Роутес, Роуте, БровсерРоутер } из "реацт-роутер-дом";
импорт { усеСтате } из "реацт";
импорт Навбар из "./Навбар";
импорт Заштићено од "./Протецтед";
импорт Хоме фром "./Хоме";
импорт Абоут фром "./Абоут";
импорт Профиле из "./Профиле";
фунцтион Апп() {
 цонст [исЛоггедИн, сетисЛоггедИн] = усеСтате (нулл);
 цонст логИн = () => {
 сетисЛоггедИн (труе);
 };
 цонст логОут = () => {
 сетисЛоггедИн (фалсе);
 };
 повратак (




 {исЛоггедИн? (
Одјавити се
 ): (
Пријавите се
 )}

} />
 елемент={



 }
 />
} />





 );
}
извоз подразумеване апликације;

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

Контрола приступа заснована на улогама

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

Како имплементирати условно приказивање у Реацт.јс (са примерима)

Условно приказивање је користан начин да побољшате своју апликацију. Ево избора начина да га користите.

Реад Нект

О аутору