Защищенные маршруты с помощью react-router-dom v6

Механизмы маршрутизации в реагирующих веб-приложениях обрабатываются с помощью библиотеки под названием react-rotuer-dom, это мощная библиотека, которая позволяет легко реализовать динамическую маршрутизацию на основе компонентов.

В сценарии, когда нам нужно защитить определенную страницу на уровне навигации браузера, нам нужно реализовать собственный защищенный маршрут для обработки логики. Последняя версия (v6) react-router-dom делает этот процесс намного проще, чем раньше.

Итак, давайте посмотрим, как мы можем реализовать защищенный маршрут в react-router-dom v6 в react.

Позвольте мне продемонстрировать процесс на примере разработанного мной приложения. Это очень простое приложение со структурой папок, как показано ниже.

src
├── components
│   └── ProtectedRoute
├── scenes
│   ├── Home
│   ├── About
│   ├── MyAccount
│   └── Unauthorized
└── App.js

Шаг 1

Установите реактивный маршрутизатор

npm install react-router-dom
or
yarn add react-router-dom

Шаг 2

Откройте App.js и определите маршруты, как показано ниже:

const App = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route exact path="/home" element={<Home/>}/>
                <Route path="/about" element={<About/>}/>
                <Route 
                   path={"/unauthorized"} 
                   element={<UnAuthorized/>}
                />
                <Route 
                   path="/my-account" 
                   element={<MyAccount/>}
                />
            </Routes>
        </BrowserRouter>
    );
};

Что следует отметить,

BrowserRouter используется для синхронизации вашего пользовательского интерфейса с URL-адресом.

Тег Switch больше не присутствует в версии 6 react-router-dom, теперь он заменен на Routes, поэтому все определения Route должны быть обернуты с тегом Маршруты

Атрибут компонента в Route заменен элементом.

Шаг 3

Теперь создайте новый компонент с именем ProtectedRoute, как показано ниже.

const ProtectedRoute = ({ component }) => {
    if (localStorage.getItem("isLoggedIn")==="true") {
        return component;
    } else {
        return <Navigate to="/unauthorized"/>;
    }
}

Здесь мы просто создаем компонент-оболочку как ProtectedRoute и возвращаем передачу компонента, который необходимо защитить, в качестве реквизита, затем мы обрабатываем логику и соответствующим образом возвращаем компонент. В этой логике он возвращает компонент только в том случае, если для свойства isLoggedIn в локальном хранилище установлено значение true.

Если текущие условия нарушают логику, мы переходим к неавторизованному компоненту, который может показать пользователю некоторые рекомендации или сообщения.

Что следует отметить,

Тег перенаправления заменен тегом Navigate в версии 6.

Шаг 4

Наконец, вам нужно просто изменить маршрут /my-account в App.js, как показано ниже. Компонент, который нам нужно защитить, — это MyAccount.

<Route 
   path="/my-account" 
   element={<ProtectedRoute component={<MyAccount/>}/>}
/>

Поскольку компонент больше не является дочерним элементом Route, нам не нужно передавать реквизиты, связанные с Route, в ProtectedRoute, поэтому ProtectedRoute теперь является просто оболочкой для соответствующего компонента. Мы просто передаем оболочку ProtectedRoute в качестве элемента маршрутизатору.

Что следует отметить,

Вы можете передать больше реквизитов, кроме компонента, в соответствии с вашей логикой.

Вот и все! Надеюсь, все понятно, не стесняйтесь делиться любыми предложениями или вопросами. Спасибо.!