material_manage_system/.superpowers/sdd/wmms-vue-migration/task-4-report.md
2026-09-15 16:08:18 +08:00

1.4 KiB

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