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