Как создавать публичные и частные маршруты с помощью React Router
Шаги по написанию публичных и частных маршрутов в приложении React с использованием React Router
При разработке приложения React с аутентификацией нам могут потребоваться публичные и частные маршруты. Давайте сначала посмотрим, что они из себя представляют.
Публичные маршруты
Публичные маршруты: вход в систему, регистрация, забытый пароль, сброс пароля. Проще говоря, к этим маршрутам можно получить доступ до входа в приложение.
Частные маршруты
Частные маршруты различаются в зависимости от приложений, например, панели управления, профиля пользователя, настроек приложения, домашней страницы и т.д. проще говоря, к этим маршрутам можно получить доступ только после входа в систему.
Ограничения для публичных и частных маршрутов заключаются в том, что публичные маршруты не должны быть доступны после входа в систему, а частные маршруты не должны быть доступны до входа в систему.
В этой статье мы увидим, как это делается - как создавать общедоступные и частные маршруты с помощью response-router для ваших приложений React. Давайте начнем
Публичные маршруты
Во-первых, давайте создадим компонент PublicRoute.js для обработки условий общедоступного маршрута, как показано ниже.
import {
Route,
Redirect
} from 'react-router-dom';
function PublicRoute({ children, isAuthenticated, ...rest }) {
return (
<Route
{...rest}
render={
({ location }) => (
!isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: '/home',
state: { from: location }
}}
/>
))
}
/>
);
}
export default PublicRoute;
Как вы можете видеть в приведенном выше коде, компонент Public route получает 3 реквизита, например children, isAuthenticated и …rest. Если пользователь аутентифицирован, он будет перенаправлен на главный экран, и он сможет получить доступ к общедоступным маршрутам только в том случае, если он не аутентифицирован (вошел в систему).
Частные маршруты
Компонент частного маршрута аналогичен общедоступному маршруту, единственное изменение - это URL-адрес перенаправления и условие аутентификации. Если пользователь не аутентифицирован, он будет перенаправлен на страницу входа в систему, и пользователь сможет получить доступ к аутентифицированным маршрутам только в том случае, если он аутентифицирован (вошел в систему).
import {
Route,
Redirect
} from 'react-router-dom';
function PrivateRoute({ children, isAuthenticated, ...rest }) {
return (
<Route
{...rest}
render={
({ location }) => (
isAuthenticated
? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: { from: location }
}}
/>
))
}
/>
);
}
export default PrivateRoute;
Защищенные маршруты
Компонент защищенного маршрута используется для сопоставления всех аутентифицированных маршрутов, как показано ниже.
import { Suspense } from 'react';
import { Route, Switch } from 'react-router-dom';
import routes from 'routes'; // Route list
import Loader from 'sharedComponent/Loader';
const ProtectedRoutes = () => (
<Switch>
<Suspense
fallback={<Loader />}
>
{routes.map(({ component: Component, path, exact }) => (
<Route
path={`/${path}`}
key={path}
exact={exact}
>
<Component />
</Route>
))}
</Suspense>
</Switch>
);
export default ProtectedRoutes;
Аутентифицированные маршруты определены в файле routes.js, как показано ниже.
import { lazy } from 'react';
const routes = [
{
path: 'home',
component: lazy(() => import('components/Home')),
exact: true
},
{
path: 'users',
component: lazy(() => import('components/Users')),
exact: true
}
];
export default routes;
Интеграция маршрутов
Теперь давайте интегрируем наши компоненты маршрута в App.js, как показано ниже.
import { lazy, Suspense } from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Redirect
} from 'react-router-dom';
import Loader from 'shareComponent/Loader';
import ProtectedRoutes from 'routes/ProtectedRoutes'; //Authenticated routes
import PublicRoute from 'routes/PublicRoute';
import PrivateRoute from 'routes/PrivateRoute';
const LoginPage = lazy(() => import('components/LoginPage'));
const Register = lazy(() => import('components/Register'));
const ForgotPassword = lazy(() => import('components/ForgotPassword'));
const NoFoundComponent = lazy(() => import('components/NoFoundComponent'));
const App = () => {
const isAuthenticated = getToken();
return (
<Router>
<Suspense fallback={<Loader />}>
<Switch>
<PublicRoute
path="/login"
isAuthenticated={isAuthenticated}
>
<LoginPage />
</PublicRoute>
<PublicRoute
path="/register"
isAuthenticated={isAuthenticated}
>
<Register />
</PublicRoute>
<PublicRoute
path="/forgot-password"
isAuthenticated={isAuthenticated}
>
<ForgotPassword />
</PublicRoute>
<PrivateRoute
path="/"
isAuthenticated={isAuthenticated}
>
<ProtectedRoutes />
</PrivateRoute>
<Route path="*">
<NoFoundComponent />
</Route>
</Switch>
</Suspense>
</Router>
);
};
export default App;
Здесь мы обернули неаутентифицированные маршруты <PublicRoute /> компонентом, а аутентифицированные маршруты - <PrivateRoute /> компонентом. Мы использовали ожидание, чтобы добавить к компонентам отложенную загрузку.
Теперь мы настроили частный и публичный маршруты. Если совпадений нет, будет отображаться <NoFoundComponent />.
