React Router를 사용한 인증 가드

인증 가드는 권한이 없는 사용자가 웹 페이지를 볼 수 없을 때 웹 페이지에 액세스하는 것을 방지하고 권한이 없는 페이지로 리디렉션합니다.

The blog post shows code samples with React Router 5

먼저 React Router로 다음과 같이 Routes를 정의합니다. 4가지 종류의 노선이 있습니다

공공 경로

읽기 전용 사용자 경로

경로 보고

시스템 관리자 경로

import {Route, Switch} from "react-router-dom";
import Home from "../components/home/Home";
import NotFound from "../components/core/404/NotFound";
import React from "react";
import Login from "../components/core/login/Login";
import Logout from "../components/core/logout/Logout";
import UnAuthorized from "../components/core/unauthorized/UnAuthorized";
import {AdminGuardedRoute} from "./AdminGuardedRoute";
import ManageAdGroup from "../components/admin/groups/ManageAdGroup";
import {ReadOnlyAccessGuardedRoute} from "./ReadOnlyAccessGuardedRoute";
import {DataUserGuardedRoute} from "./DataUserGuardedRoute";
import ReportsSearch from "../components/reports/ReportsSearch";
import useAuthService from "../hooks/useAuthService";


/**
 * Define all Routes and Sub-Routes
 *
 * @author Pavan Kumar Jadda
 * @since 1.0.0
 */
export default function Routes(): JSX.Element {
    const {isReadOnlyUser, isDataUser, isPsoManager, isSysAdmin} = useAuthService();
    return <div>
        <Switch>

            {/* Read Only User Routes */}
            <ReadOnlyAccessGuardedRoute component={Home} path={"/"} isAuthorized={isReadOnlyUser()}
                                        exact={true}/>
            <ReadOnlyAccessGuardedRoute component={Home} path={"/home"} isAuthorized={isReadOnlyUser()}
                                        exact={true}/>


            {/* Reports Routes */}
            <DataUserGuardedRoute component={ReportsSearch} path={"/report"} isAuthorized={isDataUser()}
                                  exact={true}/>

            {/* Admin Routes */}
            <AdminGuardedRoute component={ManageAdGroup} path={"/admin/group/manage"}
                               isAuthorized={isSysAdmin()} exact={true}/>

            {/* Core Routes */}
            <Route component={Login} path={"/login"} exact={true}/>
            <Route component={Logout} path={"/logout"} exact={true}/>
            <Route component={UnAuthorized} path={"/unauthorized"} exact={true}/>
            <Route component={NotFound} path={"*"}/>

        </Switch>
    </div>;
}

경로시스템은 3가지 유형의 사용자를 지원합니다.

읽기 전용 사용자(ReadOnlyAccessGuardedRoute)

사용자 보고(DataUserGuardedRoute)

시스템 관리자(AdminGuardedRoute)

각 유형의 사용자 경로는 서로 다른 경로 가드로 보호됩니다. 예를 들어 읽기 전용 액세스 보호 경로는 사용자가 READ_ONLY_USER 역할 없이 웹 페이지에 액세스하는 것을 방지하고 보고서 경로에는 DATA_USER 역할이 필요하고 시스템 관리자 경로에는 SYS_ADMIN 역할이 필요합니다.

Each Guarded Route receives an attribute called isAuthorized, which tells if the user authorized to access the route or not. This information should be defined in Routes and passed to each Guarded Route.

이러한 가드는 모두 하나의 간단한 구조를 따릅니다. 사용자가 로그인하지 않은 경우 사용자를 로그인 페이지로 리디렉션하고, 권한이 있고 웹 페이지에 액세스할 수 있는 액세스/역할이 없는 경우/unauthorized 페이지로 리디렉션합니다. 그렇지 않으면 원래 요청으로 진행합니다.

아래의 읽기 전용 액세스 보호 경로를 살펴보십시오.

읽기 전용 액세스 보호 경로

import * as React from 'react';
import {Redirect, Route,} from 'react-router-dom';
import ReactIf from "../components/shared/ReactIf";
import useAuthService from "../hooks/useAuthService";

export function ReadOnlyAccessGuardedRoute(props: { component: any; path: string; isAuthorized: boolean, exact: boolean }): JSX.Element {
    const {component: Component, isAuthorized, ...rest} = props;
    const {isUserLoggedIn} = useAuthService();
    return (
        <Route
            {...rest}
            render={(routeProps) =>
                <div>
                    {/* If not logged in, redirect to Login page */}
                    <ReactIf condition={!isUserLoggedIn()}>
                        <Redirect
                            to={{
                                pathname: '/login',
                                state: {from: routeProps?.location}
                            }}
                        />
                    </ReactIf>

                    {/* If logged in and has Read Only User role, navigate to component */}
                    <ReactIf condition={isUserLoggedIn() && isAuthorized}>
                        <Component {...routeProps} />
                    </ReactIf>

                    {/* If logged in but does not Read Only User role, navigate to Unauthorized page */}
                    <ReactIf condition={isUserLoggedIn() && !isAuthorized}>
                        <Redirect
                            to={{
                                pathname: '/unauthorized',
                                state: {from: routeProps?.location}
                            }}
                        />
                    </ReactIf>
                </div>
            }
        />
    );
}

다음과 같이 정의된 Sys Admin 보호 경로

시스템 관리자 보호 경로

import * as React from 'react';
import {Redirect, Route,} from 'react-router-dom';
import ReactIf from "../components/shared/ReactIf";
import useAuthService from "../hooks/useAuthService";

export function AdminGuardedRoute(props: { component: any; path: string; isAuthorized: boolean, exact: boolean }): JSX.Element {
    const {component: Component, isAuthorized, ...rest} = props;
    const {isUserLoggedIn} = useAuthService();

    return (
        <Route
            {...rest}
            render={(routeProps) =>
                <div>
                    {/* If not logged in, redirect to Login page */}
                    <ReactIf condition={!isUserLoggedIn()}>
                        <Redirect
                            to={{
                                pathname: '/login',
                                state: {from: routeProps.location}
                            }}
                        />
                    </ReactIf>

                    {/* If logged in and has Sys Admin role, navigate to component */}
                    <ReactIf condition={isAuthorized}>
                        <Component {...routeProps} />
                    </ReactIf>

                    {/* If logged in but does not have Sys Admin role, navigate to Unauthorized page */}
                    <ReactIf condition={!isAuthorized}>
                        <Redirect
                            to={{
                                pathname: '/unauthorized',
                                state: {from: routeProps.location}
                            }}
                        />
                    </ReactIf>
                </div>
            }
        />
    );
}

Read-Only Access Guarded Route와 Sys Admin Access Guarded Route가 실제로는 비슷해 보이지만 각 Guard에 대해 몇 가지 추가 조건이 있을 수 있습니다.

...

행복한 코딩 :)