Authorization Guards with React Router Routes

Authorization Guards with React Router Routes.md

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>;
}