Advanced Routing in React.js (Protected Routes + Role Based Access)

React.js এ Routing সাধারণত React Router ব্যবহার করে করা হয়। কিন্তু একটি Professional Web App এ শুধু Basic Routing যথেষ্ট নয়। আপনাকে দরকার হয় Protected Route, Authentication Check, এবং Role Based Routing যাতে নির্দিষ্ট User নিজের Permission অনুযায়ী Page দেখতে পারে।

🔐 What is Protected Routing?

Protected Route মানে এমন Route যেটি শুধু logged-in user দেখতে পারবে। যদি User লগইন না করে থাকে, তাহলে তাকে Login Page এ Redirect করা হবে।

👉 Example Scenario:

• Dashboard — only logged users
• Admin Panel — only admin users
• User Profile — only authenticated users

🔑 How to Create a Protected Route

নিচের কোডটি একটি Basic Protected Route Component:

import { Navigate } from "react-router-dom";

const ProtectedRoute = ({ children }) => {
    const isLoggedIn = localStorage.getItem("token");

    return isLoggedIn ? children : <Navigate to="/login" />;
};

export default ProtectedRoute;

Usage:

<Route 
  path="/dashboard" 
  element={
    <ProtectedRoute>
        <Dashboard />
    </ProtectedRoute>
  } 
/>

এখন যেকোনো User /dashboard এ যেতে চাইলে আগে তার Token চেক হবে।

🎭 What is Role Based Routing?

Role Based Routing মানে Application এ বিভিন্ন User Role থাকবে যেমনঃ Admin, Instructor, Student, Seller, Editor ইত্যাদি। প্রতিটি Role তাদের নিজস্ব Access অনুযায়ী কিছু Page দেখতে পারবে।

Example:

• Admin → Access all pages
• Editor → Manage Blogs
• Student → Access Courses

🛡 Create Role Based Protected Route

নিচের Component টি Role চেক করে রুট Show করবে:

import { Navigate } from "react-router-dom";

const RoleRoute = ({ children, allowedRoles }) => {
    const user = JSON.parse(localStorage.getItem("user"));

    if (!user) {
        return <Navigate to="/login" />;
    }

    return allowedRoles.includes(user.role)
        ? children
        : <Navigate to="/unauthorized" />;
};

export default RoleRoute;

Usage Example:

<Route 
  path="/admin" 
  element={
    <RoleRoute allowedRoles={["admin"]}>
        <AdminPanel />
    </RoleRoute>
  } 
/>

<Route 
  path="/instructor" 
  element={
    <RoleRoute allowedRoles={["admin","instructor"]}>
        <InstructorDashboard />
    </RoleRoute>
  } 
/>

🧠 Where to Store Token & Role?

সাধারণত দুই জায়গায় store করা হয়:

• localStorage → Simple projects
• httpOnly Cookie → Secure production apps

🚀 Full Routing Setup Example

import { BrowserRouter, Routes, Route } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";
import RoleRoute from "./RoleRoute";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>

        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />

        <Route 
            path="/dashboard" 
            element={
              <ProtectedRoute>
                  <Dashboard />
              </ProtectedRoute>
            } 
        />

        <Route 
            path="/admin" 
            element={
              <RoleRoute allowedRoles={["admin"]}>
                  <AdminPanel />
              </RoleRoute>
            } 
        />

        <Route path="/unauthorized" element={<Unauthorized />} />

      </Routes>
    </BrowserRouter>
  );
}

⚠ Common Mistakes (And Fixes)

• ❌ Token null হলে error → Always check user exists
• ❌ User logout করলে সেই roles থেকে না গেছে → Clear localStorage
• ❌ User role tamper → Backend must validate role

🎯 Final Tips

• Always validate roles from backend
• Never store sensitive info directly in localStorage
• Create separate Routes for admin, instructor, student dashboard
• Use JWT for secure authentication

📌 Conclusion

React.js এ Advanced Routing শেখা একটি Professional Web App তৈরি করার জন্য অত্যন্ত গুরুত্বপূর্ণ। Protected Route, Role Based Route এবং JWT Authentication মিলিয়ে আপনি নিরাপদ ও বড় অ্যাপ্লিকেশন তৈরি করতে পারবেন।