161 lines
4.6 KiB
Markdown
161 lines
4.6 KiB
Markdown
# Routing Configuration - Testing Guide
|
|
|
|
## ✅ Function 2 Completed
|
|
|
|
### Components Created:
|
|
|
|
1. **ProtectedRoute** - `src/components/auth/ProtectedRoute.tsx`
|
|
- Protects routes requiring authentication
|
|
- Redirects to `/login` if not logged in
|
|
- Saves location to return after login
|
|
|
|
2. **AdminRoute** - `src/components/auth/AdminRoute.tsx`
|
|
- Protects routes for Admin only
|
|
- Redirects to `/` if not admin
|
|
- Checks `userInfo.role === 'admin'`
|
|
|
|
3. **Page Components**:
|
|
- `RoomListPage` - Room list (public)
|
|
- `BookingListPage` - Booking history (protected)
|
|
- `DashboardPage` - Personal dashboard (protected)
|
|
|
|
### Route Structure:
|
|
|
|
#### Public Routes (No login required):
|
|
```
|
|
/ → HomePage
|
|
/rooms → RoomListPage
|
|
/about → About Page
|
|
/login → Login Page (not yet)
|
|
/register → Register Page (not yet)
|
|
/forgot-password → Forgot Password Page (not yet)
|
|
/reset-password/:token → Reset Password Page (not yet)
|
|
```
|
|
|
|
#### Protected Routes (Login required):
|
|
```
|
|
/dashboard → DashboardPage (ProtectedRoute)
|
|
/bookings → BookingListPage (ProtectedRoute)
|
|
/profile → Profile Page (ProtectedRoute)
|
|
```
|
|
|
|
#### Admin Routes (Admin only):
|
|
```
|
|
/admin → AdminLayout (AdminRoute)
|
|
/admin/dashboard → Admin Dashboard
|
|
/admin/users → User Management
|
|
/admin/rooms → Room Management
|
|
/admin/bookings → Booking Management
|
|
/admin/payments → Payment Management
|
|
/admin/services → Service Management
|
|
/admin/promotions → Promotion Management
|
|
/admin/banners → Banner Management
|
|
/admin/reports → Reports
|
|
/admin/settings → Settings
|
|
```
|
|
|
|
## 🧪 How to Test
|
|
|
|
### 1. Start Dev Server:
|
|
```bash
|
|
cd /d/hotel-booking/client
|
|
npm run dev
|
|
```
|
|
|
|
Open `http://localhost:5173`
|
|
|
|
### 2. Test Public Routes:
|
|
- Access `/` → Display HomePage ✅
|
|
- Access `/rooms` → Display RoomListPage ✅
|
|
- Access `/about` → Display About Page ✅
|
|
|
|
### 3. Test Protected Routes (Not logged in):
|
|
- Access `/dashboard` → Redirect to `/login` ✅
|
|
- Access `/bookings` → Redirect to `/login` ✅
|
|
- Access `/profile` → Redirect to `/login` ✅
|
|
|
|
### 4. Test Protected Routes (Logged in):
|
|
- Click **"🔒 Demo Login"** button at bottom right
|
|
- Access `/dashboard` → Display Dashboard ✅
|
|
- Access `/bookings` → Display Booking List ✅
|
|
- Access `/profile` → Display Profile ✅
|
|
|
|
### 5. Test Admin Routes (Role = Customer):
|
|
- Ensure logged in (role = customer)
|
|
- Access `/admin` → Redirect to `/` ✅
|
|
- Access `/admin/dashboard` → Redirect to `/` ✅
|
|
|
|
### 6. Test Admin Routes (Role = Admin):
|
|
- Click **"👑 Switch to Admin"** button
|
|
- Access `/admin` → Redirect to `/admin/dashboard` ✅
|
|
- Access `/admin/users` → Display User Management ✅
|
|
- Access `/admin/rooms` → Display Room Management ✅
|
|
- Click menu items in SidebarAdmin → Works normally ✅
|
|
|
|
### 7. Test Logout:
|
|
- Click **"🔓 Demo Logout"** button
|
|
- Access `/dashboard` → Redirect to `/login` ✅
|
|
- Access `/admin` → Redirect to `/` ✅
|
|
|
|
## 🎯 Expected Results
|
|
|
|
### ✅ ProtectedRoute:
|
|
1. Users not logged in cannot access protected routes
|
|
2. Redirect to `/login` and save `state.from` to return later
|
|
3. Logged in users can access protected routes normally
|
|
|
|
### ✅ AdminRoute:
|
|
1. Non-admin users cannot access `/admin/*`
|
|
2. Redirect to `/` if not admin
|
|
3. Admin can access all admin routes
|
|
|
|
### ✅ No redirect loop:
|
|
1. Redirect only happens once
|
|
2. No infinite redirect loop
|
|
3. Browser history works correctly (back/forward)
|
|
|
|
## 📝 Demo Buttons (Temporary)
|
|
|
|
### 🔒 Demo Login/Logout:
|
|
- Click to toggle authentication state
|
|
- Simulates login/logout
|
|
- Will be replaced by Zustand store in Function 3
|
|
|
|
### 👑 Switch Role:
|
|
- Only displays when logged in
|
|
- Toggle between `customer` ↔ `admin`
|
|
- Test AdminRoute works correctly
|
|
|
|
## 🚀 Next Steps
|
|
|
|
Function 3: useAuthStore (Zustand Store)
|
|
- Create store to manage global auth state
|
|
- Replace demo state with Zustand
|
|
- Integrate with localStorage
|
|
- Remove 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
|
|
```
|