DevGang
Авторизоваться

Как создавать публичные и частные маршруты с помощью 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 />.

Источник:

#React
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В подарок 100$ на счет при регистрации

Получить