🛡️ React protected & RBAC route - Router Data Mode

index.jsx

import { Outlet } from "react-router";

const Layout = () => <Outlet />;
export const Home = () => <>Home</>;
const Dashboard = () => <>Dashboard</>;
const Users = () => <>Users</>;
const Login = () => <>Login</>;
export const NotAuthorized = () => <h1>Not Authorized</h1>;

export const routes = [
  {
    Component: Layout,
    children: [
      {
        index: true,
        Component: Home,
      },
      {
        path: "dashboard",
        Component: Dashboard,
        authenticated: true,
      },
      {
        path: "users",
        Component: Users,
        roles: ["users-management"],
      },
      {
        path: "login",
        Component: Login,
        guest: true,
      },
    ],
  },
];

RBACRoute.jsx

import { redirect } from "react-router";
import { NotAuthorized } from "./index";

// mock hasRoles
const hasRoles = (roles) => {
  const userRoles = ["users-management", "admin"];
  if (!userRoles) return false;
  return roles.some((role) => userRoles.includes(role));
};

const authenticated = true;

export const RBACRoute = (routes) => {
  return routes.map((route) => {
    if (route.children) {
      route = {
        ...route,
        children: RBACRoute(route.children),
      };
    }

    if (route.authenticated && !authenticated) {
      delete route.Component;

      route = {
        ...route,
        Component: () => <NotAuthorized />,
      };
    }

    if (route.roles && !hasRoles(route.roles)) {
      delete route.Component;

      route = {
        ...route,
        Component: () => <NotAuthorized />,
      };
    }

    if (route.guest && authenticated) {
      route = {
        ...route,
        /**
          // redirect to home page if authenticated
          change / to any path you want
         */
        loader: async () => redirect("/"),
      };
    }

    return route;
  });
};