Browse Source
- Introduced a new composable `useActiveRole` for managing user roles, including fetching role status and switching roles with server validation. - Updated `RoleSwitcher.vue` to utilize the new composable, enhancing role selection with improved error handling and UI feedback. - Added new API endpoints for role management, including fetching user role status and switching active roles. - Enhanced product visibility logic to filter based on the user's active role, ensuring a tailored experience. - Updated database schema to support last active role tracking for users, improving session management. - Refined UI components across the application to reflect role-based changes and improve user experience.main
Bastian Masanek
1 month ago
16 changed files with 1576 additions and 91 deletions
@ -0,0 +1,142 @@ |
|||
/** |
|||
* useActiveRole Composable |
|||
* |
|||
* Client-side state management for user's active role (RoleSwitcher) |
|||
* |
|||
* Features: |
|||
* - Reactive active role state |
|||
* - List of all roles with approval status |
|||
* - Switch role function with server validation |
|||
* - Admin change notification flag |
|||
* |
|||
* Usage: |
|||
* ```vue
|
|||
* const { activeRole, roles, roleChangedByAdmin, switchRole, fetchRoleStatus } = useActiveRole() |
|||
* |
|||
* // Fetch current status (validates server-side)
|
|||
* await fetchRoleStatus() |
|||
* |
|||
* // Switch role
|
|||
* await switchRole('educator') |
|||
* ``` |
|||
*/ |
|||
|
|||
export interface RoleWithStatus { |
|||
code: string |
|||
displayName: string |
|||
description: string |
|||
hasRole: boolean |
|||
requiresApproval: boolean |
|||
} |
|||
|
|||
export function useActiveRole() { |
|||
// Use useState for shared state across the app
|
|||
const activeRole = useState<string>('activeRole', () => 'private') |
|||
const roles = useState<RoleWithStatus[]>('roles', () => []) |
|||
const roleChangedByAdmin = useState<boolean>('roleChangedByAdmin', () => false) |
|||
const loading = useState<boolean>('roleLoading', () => false) |
|||
const error = useState<string | null>('roleError', () => null) |
|||
const initialized = useState<boolean>('roleInitialized', () => false) |
|||
|
|||
/** |
|||
* Fetch current role status from server |
|||
* - Validates active role (TTL-based) |
|||
* - Fetches all roles with approval status |
|||
* - Detects if admin changed user's roles |
|||
*/ |
|||
async function fetchRoleStatus() { |
|||
loading.value = true |
|||
error.value = null |
|||
|
|||
try { |
|||
const data = await $fetch('/api/user/role-status') |
|||
|
|||
activeRole.value = data.activeRoleCode |
|||
roles.value = data.roles |
|||
roleChangedByAdmin.value = data.roleChangedByAdmin |
|||
|
|||
return data |
|||
} catch (err: any) { |
|||
console.error('Failed to fetch role status:', err) |
|||
error.value = 'Fehler beim Laden der Rollen' |
|||
throw err |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Switch to a different role |
|||
* - Validates server-side that user has the role |
|||
* - Updates session + database |
|||
* - Refreshes products list if on products page |
|||
* |
|||
* @param roleCode - Role to switch to ('private', 'educator', 'company') |
|||
* @throws Error if user doesn't have the role or if switch fails |
|||
*/ |
|||
async function switchRole(roleCode: string) { |
|||
loading.value = true |
|||
error.value = null |
|||
|
|||
try { |
|||
await $fetch('/api/user/active-role', { |
|||
method: 'PATCH', |
|||
body: { roleCode }, |
|||
}) |
|||
|
|||
// Update local state
|
|||
activeRole.value = roleCode |
|||
roleChangedByAdmin.value = false |
|||
|
|||
// Refresh products if on products page
|
|||
await refreshNuxtData('products') |
|||
|
|||
return true |
|||
} catch (err: any) { |
|||
console.error('Failed to switch role:', err) |
|||
error.value = err.data?.message || 'Fehler beim Wechseln der Rolle' |
|||
throw err |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Get roles that user actually has (approved only) |
|||
*/ |
|||
const approvedRoles = computed(() => roles.value.filter((r) => r.hasRole)) |
|||
|
|||
/** |
|||
* Check if user has multiple roles |
|||
*/ |
|||
const hasMultipleRoles = computed(() => approvedRoles.value.length > 1) |
|||
|
|||
/** |
|||
* Auto-initialize on first use (fetch role status from server) |
|||
* This ensures the role is correct immediately after login |
|||
*/ |
|||
const { loggedIn } = useUserSession() |
|||
if (!initialized.value && loggedIn.value) { |
|||
initialized.value = true |
|||
// Fetch initial role status (don't await to avoid blocking)
|
|||
fetchRoleStatus().catch((err) => { |
|||
// Silent fail - user can still use the app with default role
|
|||
console.warn('Failed to initialize role status:', err) |
|||
}) |
|||
} |
|||
|
|||
return { |
|||
// State (useState already returns writable refs)
|
|||
activeRole, |
|||
roles, |
|||
approvedRoles, |
|||
hasMultipleRoles, |
|||
roleChangedByAdmin, |
|||
loading, |
|||
error, |
|||
|
|||
// Actions
|
|||
fetchRoleStatus, |
|||
switchRole, |
|||
} |
|||
} |
|||
@ -0,0 +1,64 @@ |
|||
/** |
|||
* PATCH /api/user/active-role |
|||
* |
|||
* Switch user's active role (used by RoleSwitcher component) |
|||
* |
|||
* Request body: |
|||
* { |
|||
* "roleCode": "educator" |
|||
* } |
|||
* |
|||
* Response: |
|||
* { |
|||
* "success": true, |
|||
* "activeRoleCode": "educator" |
|||
* } |
|||
* |
|||
* Validates that user has the requested role before switching |
|||
* Updates both session (immediate) and database (preference) |
|||
*/ |
|||
|
|||
import { z } from 'zod' |
|||
import { setUserActiveRole } from '../../utils/role-session' |
|||
|
|||
const switchRoleSchema = z.object({ |
|||
roleCode: z.enum(['private', 'educator', 'company'], { |
|||
errorMap: () => ({ message: 'Ungültige Rolle' }), |
|||
}), |
|||
}) |
|||
|
|||
export default defineEventHandler(async (event) => { |
|||
// Require authentication
|
|||
await requireUserSession(event) |
|||
|
|||
// Validate request body
|
|||
const body = await readBody(event) |
|||
const { roleCode } = switchRoleSchema.parse(body) |
|||
|
|||
try { |
|||
// Set active role (validates + updates session + saves to DB)
|
|||
await setUserActiveRole(event, roleCode) |
|||
|
|||
return { |
|||
success: true, |
|||
activeRoleCode: roleCode, |
|||
} |
|||
} catch (error: any) { |
|||
// setUserActiveRole throws 403 if user doesn't have role
|
|||
if (error.statusCode === 403) { |
|||
setResponseStatus(event, 403) |
|||
return { |
|||
success: false, |
|||
message: error.message || 'Du hast diese Rolle nicht', |
|||
} |
|||
} |
|||
|
|||
// Other errors
|
|||
console.error('Role switch error:', error) |
|||
setResponseStatus(event, 500) |
|||
return { |
|||
success: false, |
|||
message: 'Fehler beim Wechseln der Rolle', |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,69 @@ |
|||
/** |
|||
* GET /api/user/role-status |
|||
* |
|||
* Get user's active role and all available roles (for RoleSwitcher dropdown) |
|||
* |
|||
* Response: |
|||
* { |
|||
* "activeRoleCode": "private", |
|||
* "roles": [ |
|||
* { |
|||
* "code": "private", |
|||
* "displayName": "Privatperson", |
|||
* "description": "Private Nutzung", |
|||
* "hasRole": true, |
|||
* "requiresApproval": false |
|||
* }, |
|||
* { |
|||
* "code": "educator", |
|||
* "displayName": "Pädagoge", |
|||
* "description": "Lehrkräfte und Schulen", |
|||
* "hasRole": false, |
|||
* "requiresApproval": true |
|||
* }, |
|||
* ... |
|||
* ], |
|||
* "roleChangedByAdmin": false |
|||
* } |
|||
* |
|||
* - Validates active role with TTL (re-checks DB every 5min) |
|||
* - Returns ALL roles (approved + not-approved) for dropdown |
|||
* - Includes "hasRole" flag to show which roles user actually has |
|||
*/ |
|||
|
|||
import { asc, eq } from 'drizzle-orm' |
|||
import { roles } from '../../database/schema' |
|||
import { getUserActiveRole } from '../../utils/role-session' |
|||
import { getUserApprovedRoleCodes } from '../../utils/roles' |
|||
|
|||
export default defineEventHandler(async (event) => { |
|||
const session = await requireUserSession(event) |
|||
|
|||
// Get active role (validates with TTL, auto-fallback if revoked)
|
|||
const activeRole = await getUserActiveRole(event) |
|||
|
|||
// Get user's approved role codes
|
|||
const approvedRoleCodes = await getUserApprovedRoleCodes(session.user.id) |
|||
|
|||
// Get ALL roles from database (for dropdown: show all, disabled if not approved)
|
|||
const db = useDatabase() |
|||
const allRoles = await db.query.roles.findMany({ |
|||
where: eq(roles.active, true), |
|||
orderBy: asc(roles.sortOrder), |
|||
}) |
|||
|
|||
// Map roles with "hasRole" status
|
|||
const rolesWithStatus = allRoles.map((role) => ({ |
|||
code: role.code, |
|||
displayName: role.displayName, |
|||
description: role.description, |
|||
hasRole: approvedRoleCodes.includes(role.code), |
|||
requiresApproval: role.requiresApproval, |
|||
})) |
|||
|
|||
return { |
|||
activeRoleCode: activeRole, |
|||
roles: rolesWithStatus, |
|||
roleChangedByAdmin: session.roleChangedByAdmin || false, |
|||
} |
|||
}) |
|||
@ -0,0 +1 @@ |
|||
ALTER TABLE "users" ADD COLUMN "last_active_role_code" "role_code"; |
|||
File diff suppressed because it is too large
@ -0,0 +1,111 @@ |
|||
import type { H3Event } from 'h3' |
|||
import { eq } from 'drizzle-orm' |
|||
import { users } from '../database/schema' |
|||
import { getUserApprovedRoleCodes } from './roles' |
|||
|
|||
/** |
|||
* Role validation cache TTL (Time To Live) |
|||
* Roles are re-validated against DB after this period |
|||
*/ |
|||
const ROLE_VALIDATION_TTL = 5 * 60 * 1000 // 5 minutes in milliseconds
|
|||
|
|||
/** |
|||
* Get user's active role with automatic validation |
|||
* |
|||
* Features: |
|||
* - Returns cached role from session if TTL hasn't expired |
|||
* - Re-validates against DB after TTL expires (every 5 minutes) |
|||
* - Auto-fallback if active role was revoked by admin |
|||
* - Updates session automatically with validated data |
|||
* |
|||
* @param event - H3 Event from API handler |
|||
* @returns Active role code (e.g., 'private', 'educator', 'company') |
|||
* @throws 401 if user is not authenticated |
|||
*/ |
|||
export async function getUserActiveRole(event: H3Event): Promise<string> { |
|||
const session = await getUserSession(event) |
|||
|
|||
if (!session?.user) { |
|||
throw createError({ |
|||
statusCode: 401, |
|||
message: 'Not authenticated', |
|||
}) |
|||
} |
|||
|
|||
const now = Date.now() |
|||
const lastValidated = session.rolesLastValidated |
|||
? new Date(session.rolesLastValidated).getTime() |
|||
: 0 |
|||
const needsRevalidation = now - lastValidated > ROLE_VALIDATION_TTL |
|||
|
|||
if (needsRevalidation) { |
|||
// TTL expired → Re-validate against database
|
|||
const currentRoles = await getUserApprovedRoleCodes(session.user.id) |
|||
const activeRole = session.activeRoleCode || 'private' |
|||
|
|||
// Check: Was active role revoked by admin?
|
|||
if (!currentRoles.includes(activeRole)) { |
|||
// Auto-fallback to first available role
|
|||
const newActiveRole = currentRoles[0] || 'private' |
|||
|
|||
await replaceUserSession(event, { |
|||
activeRoleCode: newActiveRole, |
|||
userApprovedRoles: currentRoles, |
|||
rolesLastValidated: new Date().toISOString(), |
|||
roleChangedByAdmin: true, // Flag for client notification
|
|||
}) |
|||
|
|||
return newActiveRole |
|||
} |
|||
|
|||
// Role still valid, just update cache + timestamp
|
|||
await replaceUserSession(event, { |
|||
userApprovedRoles: currentRoles, |
|||
rolesLastValidated: new Date().toISOString(), |
|||
}) |
|||
} |
|||
|
|||
return session.activeRoleCode || 'private' |
|||
} |
|||
|
|||
/** |
|||
* Set user's active role with validation |
|||
* |
|||
* Validates that user has the requested role before switching. |
|||
* Updates both session (immediate) and database (preference for next login). |
|||
* |
|||
* @param event - H3 Event from API handler |
|||
* @param roleCode - Role to switch to (must be in user's approved roles) |
|||
* @throws 401 if not authenticated |
|||
* @throws 403 if user doesn't have the requested role |
|||
*/ |
|||
export async function setUserActiveRole( |
|||
event: H3Event, |
|||
roleCode: string |
|||
): Promise<void> { |
|||
const session = await requireUserSession(event) |
|||
|
|||
// Validate that user has this role
|
|||
const approvedRoles = await getUserApprovedRoleCodes(session.user.id) |
|||
|
|||
if (!approvedRoles.includes(roleCode)) { |
|||
throw createError({ |
|||
statusCode: 403, |
|||
message: 'Du hast diese Rolle nicht', |
|||
}) |
|||
} |
|||
|
|||
// Update session with new active role
|
|||
await replaceUserSession(event, { |
|||
activeRoleCode: roleCode, |
|||
roleChangedByAdmin: false, // User switched manually
|
|||
rolesLastValidated: new Date().toISOString(), // Reset TTL
|
|||
}) |
|||
|
|||
// Update database: Save as user preference for next login
|
|||
const db = useDatabase() |
|||
await db |
|||
.update(users) |
|||
.set({ lastActiveRoleCode: roleCode }) |
|||
.where(eq(users.id, session.user.id)) |
|||
} |
|||
Loading…
Reference in new issue