bilhej/frontend
Joakim Mörling 8d07bb7ab1 feat: add Vue Router auth guards with admin role support
Implement client-side route protection with role-based access control. The auth
store now extracts the role claim from JWT tokens and exposes isAdmin. Router
guards enforce three levels of access: guestOnly (redirect authenticated users),
requiresAuth (redirect unauthenticated to login with redirect param), and
requiresAdmin (redirect non-admin users to home).

Changes:
- utils/jwt.ts: JWT payload parser using base64url decode (new file)
- authStore: add role ref, isAdmin computed, extractRole from JWT payload
- router: add route metadata (requiresAuth, requiresAdmin, guestOnly) and
  beforeEach guard with getActivePinia() safety for test environments
- OrdersPage.vue, AdminPage.vue: placeholder pages (new files)
- LoginPage.vue, RegisterPage.vue: use route.query.redirect after auth
- Router.spec.ts: 14 tests covering all guard scenarios
- authStore.spec.ts: tests for role extraction, isAdmin, role persistence
- LoginPage.spec.ts: test for redirect query param after login
- auth-guards.spec.ts: 7 Playwright E2E tests for guard behavior
- login.spec.ts: fix seed user credentials (test@bilhalsning.se)
2026-05-14 12:39:17 +02:00
..
e2e feat: add Vue Router auth guards with admin role support 2026-05-14 12:39:17 +02:00
public feat: scaffold Vue 3 + Vite frontend with TypeScript, Router, Pinia, Vitest, ESLint, Prettier 2026-05-01 00:52:38 +02:00
src feat: add Vue Router auth guards with admin role support 2026-05-14 12:39:17 +02:00
.gitignore feat: add login page with Playwright E2E tests 2026-05-13 19:17:29 +02:00
.prettierrc feat: scaffold Vue 3 + Vite frontend with TypeScript, Router, Pinia, Vitest, ESLint, Prettier 2026-05-01 00:52:38 +02:00
eslint.config.ts feat: scaffold Vue 3 + Vite frontend with TypeScript, Router, Pinia, Vitest, ESLint, Prettier 2026-05-01 00:52:38 +02:00
index.html feat: scaffold Vue 3 + Vite frontend with TypeScript, Router, Pinia, Vitest, ESLint, Prettier 2026-05-01 00:52:38 +02:00
package-lock.json feat: add login page with Playwright E2E tests 2026-05-13 19:17:29 +02:00
package.json feat: add login page with Playwright E2E tests 2026-05-13 19:17:29 +02:00
playwright.config.ts feat: add login page with Playwright E2E tests 2026-05-13 19:17:29 +02:00
README.md feat: scaffold Vue 3 + Vite frontend with TypeScript, Router, Pinia, Vitest, ESLint, Prettier 2026-05-01 00:52:38 +02:00
tsconfig.app.json feat: scaffold Vue 3 + Vite frontend with TypeScript, Router, Pinia, Vitest, ESLint, Prettier 2026-05-01 00:52:38 +02:00
tsconfig.json feat: scaffold Vue 3 + Vite frontend with TypeScript, Router, Pinia, Vitest, ESLint, Prettier 2026-05-01 00:52:38 +02:00
tsconfig.node.json feat: scaffold Vue 3 + Vite frontend with TypeScript, Router, Pinia, Vitest, ESLint, Prettier 2026-05-01 00:52:38 +02:00
vite.config.ts feat: add login page with Playwright E2E tests 2026-05-13 19:17:29 +02:00

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.