How to Build a Multi-Role Routing System in React
Sheik Mostafizur
Posted on October 8, 2024
Role-Based Profile Switch Mode
This project demonstrates a role-based profile switch system using React, TypeScript, and React Router. Users are categorized into different roles, and based on their role, they are routed to specific pages. The available roles are:
- Guest
- Authenticated User
- Owner
- Admin
The routing logic is dynamically handled by AuthContext and the profileMode which maps to the user's role.
Project Structure
.
├── App.css
├── App.tsx
├── assets
│ └── react.svg
├── components
│ └── profile-switch.tsx # Component to handle profile switching
├── context
│ └── index.tsx # Contains AuthContext for handling user state
├── index.css
├── main.tsx
├── pages # Pages corresponding to different roles
│ ├── admin.tsx # Admin home page
│ ├── authenticated.tsx # Authenticated user home page
│ ├── guest-home.tsx # Guest home page
│ └── owner.tsx # Owner home page
├── ROLE.ts # Defines role constants
├── routes
│ └── index.tsx # Main routing logic based on role
└── vite-env.d.ts
routes/index.tsx
This file contains the logic to switch between different routes based on the user’s role, defined in the AuthContext. It uses React Router's Routes and Route components to conditionally render pages based on the auth.profileMode.
import {
createBrowserRouter,
createRoutesFromElements,
Route,
Routes,
} from "react-router-dom";
import { useContext } from "react";
import { AuthContext } from "../context";
import { GuestHome } from "../pages/guest-home";
import { AuthenticatedHome } from "../pages/authenticated";
import { OwnerHome } from "../pages/owner";
import { AdminHome } from "../pages/admin";
import { role } from "../ROLE";
const guestRoutes = (
<Route>
<Route path="/" element={<GuestHome />} />
</Route>
);
const authenticatedRoutes = (
<Route>
<Route path="/" element={<AuthenticatedHome />} />
</Route>
);
const ownerRoutes = (
<Route>
<Route path="/" element={<OwnerHome />} />
</Route>
);
const adminRoutes = (
<Route>
<Route path="/" element={<AdminHome />} />
</Route>
);
const RootRoutes = () => {
const { auth } = useContext(AuthContext);
if (auth.profileMode === role.authenticated) {
return <Routes>{authenticatedRoutes}</Routes>;
}
if (auth.profileMode === role.owner) {
return <Routes>{ownerRoutes}</Routes>;
}
if (auth.profileMode === role.admin) {
return <Routes>{adminRoutes}</Routes>;
}
return <Routes>{guestRoutes}</Routes>;
};
const router: ReturnType<typeof createBrowserRouter> = createBrowserRouter(
createRoutesFromElements(<Route path="/*" element={<RootRoutes />} />)
);
export default router;
Role Definitions in ROLE.ts
export const role = {
guest: "guest",
authenticated: "authenticated",
owner: "owner",
admin: "admin",
};
How It Works
-
AuthContext: Stores the user's authentication state, including the
profileModethat determines which set of routes to display. -
Profile Modes: Based on the value of
profileMode, different sets of routes are activated:-
guest: Displays theGuestHomepage. -
authenticated: Displays theAuthenticatedHomepage. -
owner: Displays theOwnerHomepage. -
admin: Displays theAdminHomepage.
-
- Dynamic Routing: The app dynamically switches between routes based on the user's role.
Getting Started
- Clone the repository.
- Install the dependencies:
npm install
- Run the development server:
npm run dev
- Open the app in the browser at
http://localhost:3000/.
Technologies Used
- React: For building the user interface.
- TypeScript: For static typing and better developer experience.
- React Router: For routing based on user roles.
- Vite: For fast development server and build setup.
Repo Source Code: role-base-profile-switch
Follow me
💖 💪 🙅 🚩
Sheik Mostafizur
Posted on October 8, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
