38 lines
1.4 KiB
Markdown
38 lines
1.4 KiB
Markdown
# Task 4 Report: Layout Components and Router Guards
|
|
|
|
## Completed Files
|
|
|
|
1. **frontend/src/components/layout/AppHeader.vue** - Created
|
|
- Horizontal menu with app title and user info
|
|
- Displays username and role tag (admin/user)
|
|
- Logout button that clears auth state and redirects to /login
|
|
|
|
2. **frontend/src/components/layout/AppSidebar.vue** - Created
|
|
- Dynamic menu based on user role
|
|
- Admin-only menus: materials, inbound, outbound, approval, logs, users
|
|
- User menus: stock, application
|
|
- Emits menu-select event for navigation
|
|
|
|
3. **frontend/src/router/index.js** - Rewritten
|
|
- All routes with lazy loading
|
|
- Route meta fields: guestOnly, requiresAuth, adminOnly
|
|
- beforeEach guard handles:
|
|
- Redirecting logged-in users away from /login
|
|
- Redirecting unauthenticated users to /login
|
|
- Redirecting non-admin users from admin routes to /stock
|
|
|
|
4. **frontend/src/App.vue** - Rewritten
|
|
- Conditional layout: full layout when logged in, just router-view otherwise
|
|
- AppHeader + AppSidebar + main content area structure
|
|
- Menu navigation handling via handleMenuSelect
|
|
|
|
5. **frontend/src/views/Login.vue** - Created
|
|
- Centered login form with username/password fields
|
|
- Form validation and loading state
|
|
- Integrates with authStore login method
|
|
|
|
## Verification
|
|
|
|
- Dev server started successfully on http://localhost:8081/
|
|
- No compilation or runtime errors detected
|