Hotel-Booking/client/ROUTING_GUIDE.md

Routing Configuration - Hướng dẫn Test

✅ Đã hoàn thành Chức năng 2

Components đã tạo:

1. ProtectedRoute - src/components/auth/ProtectedRoute.tsx

   • Bảo vệ routes yêu cầu authentication
   • Redirect về /login nếu chưa đăng nhập
   • Lưu location để quay lại sau khi login

2. AdminRoute - src/components/auth/AdminRoute.tsx

   • Bảo vệ routes chỉ dành cho Admin
   • Redirect về / nếu không phải admin
   • Kiểm tra userInfo.role === 'admin'

3. Page Components:

   • RoomListPage - Danh sách phòng (public)
   • BookingListPage - Lịch sử đặt phòng (protected)
   • DashboardPage - Dashboard cá nhân (protected)

Cấu trúc Routes:

Public Routes (Không cần đăng nhập):

/                  → HomePage
/rooms             → RoomListPage
/about             → About Page
/login             → Login Page (chưa có)
/register          → Register Page (chưa có)
/forgot-password   → Forgot Password Page (chưa có)
/reset-password/:token → Reset Password Page (chưa có)

Protected Routes (Cần đăng nhập):

/dashboard         → DashboardPage (ProtectedRoute)
/bookings          → BookingListPage (ProtectedRoute)
/profile           → Profile Page (ProtectedRoute)

Admin Routes (Chỉ Admin):

/admin             → AdminLayout (AdminRoute)
/admin/dashboard   → Admin Dashboard
/admin/users       → Quản lý người dùng
/admin/rooms       → Quản lý phòng
/admin/bookings    → Quản lý đặt phòng
/admin/payments    → Quản lý thanh toán
/admin/services    → Quản lý dịch vụ
/admin/promotions  → Quản lý khuyến mãi
/admin/banners     → Quản lý banner
/admin/reports     → Báo cáo
/admin/settings    → Cài đặt

🧪 Cách Test

1. Khởi động Dev Server:

cd /d/hotel-booking/client
npm run dev

Mở http://localhost:5173

2. Test Public Routes:

• Truy cập / → Hiển thị HomePage ✅
• Truy cập /rooms → Hiển thị RoomListPage ✅
• Truy cập /about → Hiển thị About Page ✅

3. Test Protected Routes (Chưa login):

• Truy cập /dashboard → Redirect về /login ✅
• Truy cập /bookings → Redirect về /login ✅
• Truy cập /profile → Redirect về /login ✅

4. Test Protected Routes (Đã login):

• Click nút "🔒 Demo Login" ở góc dưới phải
• Truy cập /dashboard → Hiển thị Dashboard ✅
• Truy cập /bookings → Hiển thị Booking List ✅
• Truy cập /profile → Hiển thị Profile ✅

5. Test Admin Routes (Role = Customer):

• Đảm bảo đã login (role = customer)
• Truy cập /admin → Redirect về / ✅
• Truy cập /admin/dashboard → Redirect về / ✅

6. Test Admin Routes (Role = Admin):

• Click nút "👑 Switch to Admin"
• Truy cập /admin → Redirect về /admin/dashboard ✅
• Truy cập /admin/users → Hiển thị User Management ✅
• Truy cập /admin/rooms → Hiển thị Room Management ✅
• Click các menu trong SidebarAdmin → Hoạt động bình thường ✅

7. Test Logout:

• Click nút "🔓 Demo Logout"
• Truy cập /dashboard → Redirect về /login ✅
• Truy cập /admin → Redirect về / ✅

🎯 Kết quả mong đợi

✅ ProtectedRoute:

1. User chưa login không thể truy cập protected routes
2. Redirect về /login và lưu state.from để quay lại sau
3. User đã login có thể truy cập protected routes bình thường

✅ AdminRoute:

1. User không phải admin không thể truy cập /admin/*
2. Redirect về / nếu không phải admin
3. Admin có thể truy cập tất cả admin routes

✅ Không có redirect loop:

1. Redirect chỉ xảy ra 1 lần
2. Không có vòng lặp redirect vô tận
3. Browser history hoạt động đúng (back/forward)

📝 Demo Buttons (Tạm thời)

🔒 Demo Login/Logout:

• Click để toggle authentication state
• Mô phỏng login/logout
• Sẽ được thay bằng Zustand store ở Chức năng 3

👑 Switch Role:

• Chỉ hiển thị khi đã login
• Toggle giữa customer ↔ admin
• Test AdminRoute hoạt động đúng

🚀 Bước tiếp theo

Chức năng 3: useAuthStore (Zustand Store)

• Tạo store quản lý auth state toàn cục
• Thay thế demo state bằng Zustand
• Tích hợp với localStorage
• Xóa demo toggle buttons

🔧 File Structure

src/
├── components/
│   ├── auth/
│   │   ├── ProtectedRoute.tsx
│   │   ├── AdminRoute.tsx
│   │   └── index.ts
│   └── layout/
│       ├── Header.tsx
│       ├── Footer.tsx
│       ├── SidebarAdmin.tsx
│       ├── LayoutMain.tsx
│       └── index.ts
├── pages/
│   ├── HomePage.tsx
│   ├── AdminLayout.tsx
│   └── customer/
│       ├── RoomListPage.tsx
│       ├── BookingListPage.tsx
│       └── DashboardPage.tsx
└── App.tsx