Обикновено, когато се създават уеб приложения, страниците за вход се използват за защита на частни страници. Например за платформа за блогове таблото за управление може да е достъпно само за удостоверени потребители. Ако неупълномощен потребител се опита да получи достъп до тази страница, приложението го пренасочва към страницата за вход. След като влязат, те получават достъп.
В тази статия ще разгледаме как можете да пренасочите потребител от ограничена страница към страница за вход. Също така ще обсъдим как можете да върнете потребителя обратно на страницата, на която е бил, след като е влязъл.
В React Router v6 има два начина, които можете да използвате за пренасочване на потребител — компонента Navigate и useNavigate() кука.
Създайте приложение React
Създайте просто React приложение, като използвате create-react-app команда. Ще използвате това приложение, за да тествате как компонентът Navigate и useNavigate() работа с кука.
npx създавам-react-app реагира-пренасочване
Създайте страница за вход
Ще трябва да създадете страница за вход, за да удостоверявате потребителите. Тъй като това не е урок за удостоверяване, използвайте масив от обекти като потребителска база данни.
Създайте нов файл в src папка и я наименувайте Login.js. След това добавете следния код към създайте формата за вход.
импортиране {useState} от "реагира";
импортиране Табло от "./Табло";
конст Вход = () => {
const [потребителско име, setusername] = useState("");
const [парола, setpassword] = useState("");
конст [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| невярно));
const потребители = [{ потребителско име: "Джейн", парола: "тестова парола" }];
конст handleSubmit = (e) => {
д.preventDefault()
конст account = users.find((user) => user.username потребителско име);
ако (акаунт && account.password парола) {
setauthenticated(вярно)
localStorage.setItem("удостоверени", вярно);
}
};
връщане (
<див>
<стр>Добре дошъл обратно</стр>
<форма onSubmit={handleSubmit}>
<вход
тип="текст"
име="Потребителско име"
стойност={потребителско име}
onChange={(e) => setusername (e.target.value)}
/>
<вход
тип="парола"
име="Парола"
onChange={(e) => setpassword (e.target.value)}
/>
<тип вход ="Изпращане" стойност="Изпращане" />
</form>
</div>
)
};
}
износпо подразбиране Влизам;
Това е проста форма за влизане. Когато потребител изпрати своето потребителско име и парола, те се проверяват спрямо масива. Ако тези подробности са правилни, удостовереното състояние е зададено на вярно. Тъй като ще проверявате дали потребителят е удостоверен в компонента Табло за управление, вие също трябва да съхраните състоянието на удостоверяване някъде, което може да бъде достъпно от други компоненти. Тази статия използва локално хранилище. В реално приложение, използвайки Реагирайте в контекста би било по-добър избор.
Създайте страница на таблото за управление
Добавете следния код в нов файл, наречен Dashboard.js.
конст Табло = () => {
връщане (
<див>
<стр>Добре дошли във вашето табло за управление</стр>
</div>
);
};
износпо подразбиране Табло;
Таблото за управление трябва да бъде достъпно само за удостоверени потребители. Следователно, когато потребителите посещават страницата на таблото за управление, първо проверете дали са удостоверени. Ако не са, пренасочете ги към страницата за вход.
За да направите това, първо настройте маршрутите на приложението с помощта на React рутер.
npm Инсталирай реагират-рутер-дом
В index.js настройте маршрутизирането за вашето приложение.
импортиране Реагирайте от "реагира";
импортиране ReactDOM от "react-dom/клиент";
импортиране Приложение от "./Приложение";
импортиране { BrowserRouter, Route, Routes } от "react-router-dom";
импортиране Влизам от "./Влизам";
импортиране Табло от "./Табло";
конст корен = ReactDOM.createRoot(документ.getElementById("root"));
корен.render(
<Реагирайте. Строг режим>
<BrowserRouter>
<Маршрути>
<Елемент на индекса на маршрута={<Приложение />} />
<Път на маршрута="Влизам" елемент={<Влизам />} />
<Път на маршрута="табло" елемент={<Табло />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Защитете страницата на таблото за управление
Сега, след като маршрутите на вашето приложение са настроени, следващата стъпка е да направете маршрута на таблото частен. Когато компонентът на таблото за управление се зареди, състоянието на удостоверяване се извлича от локалното хранилище и се съхранява в състоянието. Ако потребителят не е удостоверен, приложението ще пренасочи към страницата за вход, в противен случай ще покаже страницата на таблото за управление.
импортиране {useEffect, useState} от "реагира";
конст Табло = () => {
конст [удостоверен, установен в автентичност] = useState(нула);
useEffect(() => {
const loggedInUser = localStorage.getItem("удостоверени");
if (loggedInUser) {
setauthenticated (loggedInUser);
}
}, []);
if (!authenticated) {
// Пренасочване
} друго {
връщане (
<див>
<стр>Добре дошли във вашето табло за управление</стр>
</div>
);
}
};
износпо подразбиране Табло;
Пренасочване на потребителя към страницата за вход чрез навигация
Компонентът Navigate замени компонента Redirect, който беше използван в React Router v5. Импортиране на навигация от react-router-dom.
импортиране {Навигиране} от "react-router-dom";
За да пренасочите неавтентифицирани потребители, използвайте го по следния начин.
if (!authenticated) {
връщане <Придвижете се до replace to="/login" />;
} друго {
връщане (
<див>
<стр>Добре дошли във вашето табло за управление</стр>
</div>
);
}
Компонентът Navigate е декларативен API. Той разчита на потребителско събитие, което в този случай е удостоверяване, за да предизвика промяна на състоянието и следователно да предизвика повторно изобразяване на компонент. Имайте предвид, че не е необходимо да използвате ключовата дума replace. Използването му замества текущия URL адрес, вместо да го изпраща в хронологията на браузъра.
Пренасочване на потребителя към друга страница чрез useNavigate()
Другата опция за извършване на пренасочвания в React е useNavigate() кука. Тази кука осигурява достъп до API за навигация. Започнете, като го импортирате от react-router-dom.
импортиране {useNavigate} от "react-router-dom";
Пренасочване, след като потребителят бъде успешно удостоверен в handleSubmit() функционират така:
конст навигация = useNavigate();
конст Вход = () => {
конст навигация = useNavigate();
const [потребителско име, setusername] = useState("");
const [парола, setpassword] = useState("");
конст [удостоверен, установен в автентичност] = useState(
localStorage.getItem (localStorage.getItem("удостоверени") || невярно)
);
const потребители = [{ потребителско име: "Джейн", парола: "тестова парола" }];
конст handleSubmit = (e) => {
д.preventDefault();
конст account = users.find((user) => user.username потребителско име);
ако (акаунт && account.password парола) {
localStorage.setItem("удостоверени", вярно);
навигация("/dashboard");
}
};
връщане (
<див>
<форма onSubmit={handleSubmit}>
<вход
тип="текст"
име="Потребителско име"
стойност={потребителско име}
onChange={(e) => setusername (e.target.value)}
/>
<вход
тип="парола"
име="Парола"
onChange={(e) => setpassword (e.target.value)}
/>
<тип вход ="Изпращане" стойност="Изпращане" />
</form>
</div>
);
};
В този пример, след като потребителят изпрати формуляра с правилните данни, той се пренасочва към таблото за управление.
Когато създавате приложения, една от целите е да предоставите на потребителите най-доброто изживяване. Можете да направите това, като върнете потребителя обратно на страницата, на която е бил преди, като го пренасочите към страницата за вход. Можете да направите това, като подадете -1, за да навигирате по този начин, навигация (-1). Действа по същия начин като натискането на бутона за връщане назад на вашия браузър.
Маршрутизиране в React
В тази статия научихте как можете да пренасочите потребител към друга страница в React, като използвате компонента Navigate и useNavigate() кука. Статията използва формуляр за влизане, за да демонстрира как можете да пренасочвате неавтентифицирани потребители от защитена страница към страницата за вход.
