1.4 KiB
1.4 KiB
Task 4 Report: Layout Components and Router Guards
Completed Files
-
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
-
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
-
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
-
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
-
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