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

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

У Реацт Роутер в6, постоје два начина на која можете да користите да преусмерите корисника — компонента Навигате и усеНавигате() кука.

Направите Реацт апликацију

Направите једноставну Реацт апликацију користећи цреате-реацт-апп команда. Ову апликацију ћете користити да тестирате како компонента Навигате и усеНавигате() рад на удици.

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

Направите страницу за пријаву

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

Креирајте нову датотеку у срц фолдер и дајте му име Логин.јс. Затим додајте следећи код у креирајте образац за пријаву.

увоз { усеСтате } из "реаговати";
увоз Командна табла из "./Командна табла";
конст Пријава = () => {
 цонст [корисничко име, сетусернаме] = усеСтате("");
 цонст [пассворд, сетпассворд] = усеСтате("");
конст [аутхентицатед, сетаутхентицатед] = усеСтате (лоцалСтораге.гетИтем (лоцалСтораге.гетИтем("аутхентицатед")|| лажно));
 цонст усерс = [{ корисничко име: "Јане", Лозинка: "тестпассворд" }];
конст хандлеСубмит = (е) => {
е.превентДефаулт()
конст налог = усерс.финд((корисник) => усер.усернаме корисничко име);
 ако (рачун && аццоунт.пассворд лозинка) {
 потврђено (истинито)
 лоцалСтораге.сетИтем("оверен", истинито);
 }
 };
повратак (
<див>
<стр>Добродошли назад</п>
<форм онСубмит={хандлеСубмит}>
<улазни
 типе="текст"
 наме="Корисничко име"
 валуе={корисничко име}
 онЦханге={(е) => сетусернаме (е.таргет.валуе)}
 />
<улазни
 типе="Лозинка"
 наме="Лозинка"
 онЦханге={(е) => сетпассворд (е.таргет.валуе)}
 />
<тип уноса="прихвати" валуе="прихвати" />
</form>
</div>
 )
};
}
извозУобичајено Пријавите се;

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

Направите страницу за контролну таблу

Додајте следећи код у нову датотеку под називом Дасхбоард.јс.

конст Контролна табла = () => {
повратак (
<див>
<стр>Добро дошли на своју контролну таблу</п>
</div>
 );
};
извозУобичајено Командна табла;

Контролна табла би требало да буде доступна само аутентификованим корисницима. Стога, када корисници посете страницу контролне табле, прво проверите да ли су аутентификовани. Ако нису, преусмерите их на страницу за пријаву.

Да бисте то урадили, прво подесите руте апликација користећи Реацт рутер.

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

У индек.јс, подесите рутирање за своју апликацију.

увоз Реаговати из "реаговати";
увоз РеацтДОМ из "реаговање-дом/клијент";
увоз Апликација из "./Апликација";
увоз { БровсерРоутер, Роуте, Роутес } из "реаговати-рутер-дом";
увоз Пријавите се из "./Пријавите се";
увоз Командна табла из "./Командна табла";
конст роот = РеацтДОМ.цреатеРоот(документ.гетЕлементБиИд("роот"));
корен.дати, пружити(
<Реаговати. СтрицтМоде>
<БровсерРоутер>
<Руте>
<Елемент индекса руте={<Апликација />} />
<Путања руте="Пријавите се" елемент={<Пријавите се />} />
<Путања руте="Командна табла" елемент={<Командна табла />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);

Заштитите страницу контролне табле

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

увоз { усеЕффецт, усеСтате } из "реаговати";
конст Контролна табла = () => {
конст [аутхентицатед, сетаутхентицатед] = усеСтате(нула);
 усеЕффецт(() => {
 цонст логгедИнУсер = лоцалСтораге.гетИтем("оверен");
 иф (логгедИнУсер) {
 сетаутхентицатед (логгедИнУсер);
 }
 }, []);
 иф (!аутхентицатед) {
// Редирецт
 } друго {
повратак (
<див>
<стр>Добро дошли на своју контролну таблу</п>
</div>
 );
 }
};
извозУобичајено Командна табла;

Преусмери корисника на страницу за пријаву помоћу Навигате

Компонента Навигате заменила је компоненту Редирецт која је коришћена у Реацт Роутер в5. Увези Навигација са реацт-роутер-дом.

увоз { Навигација } из "реаговати-рутер-дом";

Да бисте преусмерили неауторизоване кориснике, користите га на следећи начин.

иф (!аутхентицатед) {
 повратак <Дођите до замене на="/login" />;
} друго {
повратак (
<див>
<стр>Добро дошли на своју контролну таблу</п>
</div>
 );
}

Компонента Навигате је декларативни АПИ. Ослања се на кориснички догађај, који је у овом случају аутентификација, да изазове промену стања и последично изазове поновно приказивање компоненте. Имајте на уму да не морате да користите кључну реч реплаце. Његово коришћење замењује тренутни УРЛ уместо да га гура у историју прегледача.

Преусмери корисника на другу страницу помоћу усеНавигате()

Друга опција за извођење преусмеравања у Реацт-у је усеНавигате() кука. Ова кука омогућава приступ императивном АПИ-ју за навигацију. Почните тако што ћете га увести из реацт-роутер-дом.

увоз { усеНавигате } из "реаговати-рутер-дом";

Преусмери када се корисник успешно аутентификује у хандлеСубмит() функционише овако:

конст навигате = усеНавигате();
конст Пријава = () => {
конст навигате = усеНавигате();
 цонст [корисничко име, сетусернаме] = усеСтате("");
 цонст [пассворд, сетпассворд] = усеСтате("");
конст [аутхентицатед, сетаутхентицатед] = усеСтате(
 лоцалСтораге.гетИтем (лоцалСтораге.гетИтем("оверен") || лажно)
 );
 цонст усерс = [{ корисничко име: "Јане", Лозинка: "тестпассворд" }];
конст хандлеСубмит = (е) => {
е.превентДефаулт();
конст налог = усерс.финд((корисник) => усер.усернаме корисничко име);
 ако (рачун && аццоунт.пассворд лозинка) {
 лоцалСтораге.сетИтем("оверен", истинито);
 навигација("/dashboard");
 }
 };
повратак (
<див>
<форм онСубмит={хандлеСубмит}>
<улазни
 типе="текст"
 наме="Корисничко име"
 валуе={корисничко име}
 онЦханге={(е) => сетусернаме (е.таргет.валуе)}
 />
<улазни
 типе="Лозинка"
 наме="Лозинка"
 онЦханге={(е) => сетпассворд (е.таргет.валуе)}
 />
<тип уноса="прихвати" валуе="прихвати" />
</form>
</div>
 );
};

У овом примеру, када корисник пошаље образац са тачним детаљима, преусмерава се на контролну таблу.

Приликом креирања апликација, један од циљева је да се корисницима пружи најбоље искуство. То можете учинити тако што ћете корисника вратити на страницу на којој су били пре преусмеравања на страницу за пријаву. То можете учинити тако што ћете пренети -1 да бисте се кретали овако, навигате(-1). Делује на исти начин као и притискање дугмета за повратак на вашем претраживачу.

Рутирање у Реацт-у

У овом чланку сте научили како можете да преусмерите корисника на другу страницу у Реацт-у користећи компоненту Навигате и усеНавигате() кука. Чланак је користио образац за пријаву да покаже како можете да преусмерите неауторизоване кориснике са заштићене странице на страницу за пријаву.