[React] Public, Private và Restricted routes trong React

Khi phát triển Ứng dụng React với Authentication (Xác thực), chúng ta có thể gặp những yêu cầu tạo Public và Private Routes. Đầu tiên chúng ta hãy xem Public và Private Routes là gì?

Public Routes là gì?

Public Routes là đường dẫn đến các trang mà không cần xác thực người dùng, như trang chủ, trang tin tức,....

Nói một cách dễ hiểu, Public Routes này là các đường dẫn URL có thể được truy cập trước khi người dùng đăng nhập vào Ứng dụng.

Private Routes là gì?

Private Routes cũng giống như Public Routes nhưng khác nhau là người dùng cần phải đăng nhập, hay có quyền xem trang đường dẫn đó.

Ví dụ: Trang tổng quan, Hồ sơ người dùng, Cài đặt ứng dụng, v.v.

Nói cách đơn giản, Chỉ có thể truy cập các trang này sau khi đăng nhập.

Các hạn chế đối với các Public và Private Routes là các Private Routes là không được truy cập trước khi đăng nhập.

Restricted Routes là gì?

Restricted Routes là giống như một public route nhưng là một route bị hạn chế, dành những người dùng chưa xác thực có thể truy cập được. Ví dụ như trang login

Trong bài viết này, chúng ta có thể thấy hướng dẫn "Cách tạo các Public, Private và Restricted Routes bằng react-router" trong ứng dụng React.

Chúng ta sẽ sử dụng React Router. Ứng dụng nhỏ của chúng ta gồm component:

+ Home: là public route mọi người có thể truy cập

+ Login: là restricted route dành cho người dùng xác thực tài khoản

+ Dashboard: là trang private route dành khi người dùng đã xác thực.

isAuthenticated là nói chúng ta người dùng đã xác thực hay không.

Hướng dẫn tạo Public và Restricted Routes

Tạo file PublicRoute.js chứ component để xử lý public route

import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';
import { ROUTES } from '../constants';
import { isAuthenticated } from '../auth.utils';

interface PublicRouteProps {
    restricted?: boolean;
}

function PublicRoute(props: PublicRouteProps & RouteProps): React.ReactElement {
    const { component: Component, restricted = false, ...rest } = props;

    const render = props => {
        if (isAuthenticated && restricted) {
            return <Redirect to={ROUTES.DASHBOARD} />;
        }

        return <Component {...props} />;
    };

    return <Route {...rest} render={render} />;
}

export default PublicRoute;

Ở trên bạn thấy Route component từ React mặc định là public, nhưng chúng ta có thể làm cho nó trở thành hạn chế.

Chúng ta có thể thêm prop restricted với giá trị mặc định là false và thêm điều kiện: Nếu người dùng đã xác nhận và route là restricted thì sau đó chúng ta chuyển về trang Dashboard .

Hướng dẫn tạo Private Routes

Tạo file PrivateRoute.js chứ component để xử lý private route

import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';
import { ROUTES } from '../constants';
import { isAuthenticated } from '../auth.utils';

function PrivateRoute(props: RouteProps): React.ReactElement {
    const { component: Component, ...rest } = props;

    const render = props => {
        if (!isAuthenticated) {
            return <Redirect to={ROUTES.LOGIN} />;
        }

        return <Component {...props} />;
    };

    return <Route {...rest} render={render} />;
}

export default PrivateRoute;

Private Route component tương tự như Public Route, thay đổi duy nhất là chuyển hướng và điều kiện xác thực.

Nếu người dùng không được xác thực hoặc là hạn chế người dùng thì người dùng sẽ được chuyển hướng đến trang đăng nhập.

Đặt tất cả vào ứng dụng

Cuối cùng chúng ta khai báo chúng vào tất cả vào App.tsx component và nó sẽ giống như bây giờ

import React from 'react';
import { BrowserRouter, Switch } from 'react-router-dom';
import { ROUTES } from './constants';
import { Home, Dashboard, Login } from './pages';
import { PrivateRoute, PublicRoute } from './components';

function App(): React.ReactElement {
    return (
        <BrowserRouter>
            <Switch>
                <PublicRoute component={Home} path={ROUTES.HOME} exact />
                <PublicRoute restricted component={Login} path={ROUTES.LOGIN} exact />
                <PrivateRoute component={Dashboard} path={ROUTES.DASHBOARD} exact />
            </Switch>
        </BrowserRouter>
    );
}

export default App;

Hy vọng bài viết có thể giúp bạn biết cách khởi tạo Public, Private và Restricted routes trong React.