munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat (rbac): implement role-based access control

Browse Source
This commit is contained in:
Abizrh
2025-08-12 11:32:36 +07:00
parent 59db7a8479
commit 125d7857ce
16 changed files with 394 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/patient/entry-form.vue
+34 -5
View File
@@ -1,9 +1,38 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import Block from '~/components/pub/form/block.vue'
import FieldGroup from '~/components/pub/form/field-group.vue'
import Field from '~/components/pub/form/field.vue'
import Label from '~/components/pub/form/label.vue'
</script>
<template>
<div>entry form</div>
<form id="entry-form">
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
<!-- <i class="bi bi-file-earmark-person"></i> -->
<Icon name="i-lucide-user" />
<span class="font-semibold">Tambah</span> Pasien
</div>
<div>
<PubNavFooterCs />
</div>
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
<div>
<Block>
<FieldGroup :column="2">
<Label>Nama</Label>
<Field name="name">
<Input type="text" name="name" />
</Field>
</FieldGroup>
<FieldGroup :column="2">
<Label>Nomor RM</Label>
<Field name="name">
<Input type="text" name="name" />
</Field>
</FieldGroup>
</Block>
</div>
</div>
<div class="my-2 flex justify-end py-2">
<PubNavFooterCs />
</div>
</form>
</template>
app/components/layout/Header.vue
+1 -1
View File
@@ -37,7 +37,7 @@ watch(
if (val) {
links.value = setLinks()
}
}
},
)
</script>
app/components/pub/form/block.vue
+1 -1
View File
@@ -5,7 +5,7 @@ defineProps<{
</script>
<template>
<div :class="`mb-5 flex-wrap md:flex ${classValExt || ''}`">
<div :class="`m-3 mb-5 flex-wrap md:flex ${classValExt || ''}`">
<slot />
</div>
</template>
app/components/pub/form/field-group.vue
+9 -1
View File
@@ -34,7 +34,15 @@ const classVal = computed(() => {
</script>
<template>
<div :class="classVal">
<div
:class="[
column === 1 ? 'w-full' : column === 2 ? 'pe-4 md:w-1/2' : 'pe-4 md:w-1/3',
density === 'dense' ? '' : 'mb-2 md:mb-2.5 xl:mb-3',
side !== 'break' ? 'md:flex' : '',
position === 'dynamic' ? 'ps-4' : '',
props.class,
]"
>
<slot />
</div>
</template>
app/components/pub/form/label.vue
+72
View File
@@ -0,0 +1,72 @@
<script setup lang="ts">
const props = withDefaults(
defineProps<{
size?: 'default' | 'narrow' | 'wide'
height?: 'default' | 'compact'
position?: 'default' | 'dynamic'
class?: string
}>(),
{
size: 'default',
height: 'default',
position: 'default',
class: '',
},
)
const classVal = computed(() => {
let val = ''
if (props.size === 'narrow') val += 'size-narrow '
else if (props.size === 'wide') val += 'size-wide '
else val += 'size-default '
if (props.height === 'compact') val += 'height-compact '
else val += 'height-default '
if (props.position === 'dynamic') val += 'position-dynamic '
else val += 'position-default '
return (val + (props.class || '')).trim()
})
</script>
<template>
<div class="label" :class="classVal">
<label>
<slot />
</label>
</div>
</template>
<style scoped>
.label {
@apply block flex-shrink-0 shrink-0;
}
.size-default {
@apply w-28 2xl:w-36;
}
.size-narrow {
@apply w-24 2xl:w-28;
}
.size-wide {
@apply w-44 2xl:w-48;
}
.height-default {
@apply pt-2 2xl:pt-2.5;
}
.height-compact {
line-height: 14pt;
}
.position-default {
@apply pe-2 text-start;
}
.position-dynamic > * {
@apply block pe-2.5 md:text-end;
}
</style>
app/components/pub/nav/footer/cs.vue
+2 -2
View File
@@ -1,9 +1,9 @@
<script setup lang="ts"></script>
<template>
<div class="flex justify-between">
<div class="flex justify-between px-2">
<div>
<Button variant="outline" size="sm">
<Button variant="outline">
<Icon name="i-lucide-pencil" class="mr-1" />
Edit
</Button>
app/components/pub/ui/input/Input.vue
+9 -1
View File
@@ -20,5 +20,13 @@ const modelValue = useVModel(props, 'modelValue', emits, {
</script>
<template>
<input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
<input
v-model="modelValue"
:class="
cn(
'border-input ring-offset-background placeholder:text-muted-foreground flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
props.class,
)
"
/>
</template>
app/composables/useRBAC.ts
+48
View File
@@ -0,0 +1,48 @@
import type { Permission, RoleAccess } from '~/models/role'
/**
* Check if user has access to a page
*/
export function useRBAC() {
// NOTE: this roles was dummy for testing only, it should taken from the user store
// const authStore = useAuthStore()
const checkRole = (roleAccess: RoleAccess, _userRoles?: string[]): boolean => {
const roles = ['admisi']
return roles.some((role: string) => role in roleAccess)
}
const checkPermission = (roleAccess: RoleAccess, permission: Permission, _userRoles?: string[]): boolean => {
const roles = ['admisi']
return roles.some((role: string) => roleAccess[role]?.includes(permission))
}
const getUserPermissions = (roleAccess: RoleAccess, _userRoles?: string[]): Permission[] => {
// const roles = userRoles || authStore.roles
const roles = ['admisi']
const permissions = new Set<Permission>()
roles.forEach((role) => {
if (roleAccess[role]) {
roleAccess[role].forEach((permission) => permissions.add(permission))
}
})
return Array.from(permissions)
}
const hasCreateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'C')
const hasReadAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'R')
const hasUpdateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'U')
const hasDeleteAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'D')
return {
checkRole,
checkPermission,
getUserPermissions,
hasCreateAccess,
hasReadAccess,
hasUpdateAccess,
hasDeleteAccess,
}
}
app/layouts/default.vue
+80 -3
View File
@@ -1,4 +1,21 @@
<script setup lang="ts"></script>
<script setup lang="ts">
const route = useRoute()
const contentFrame = computed(() => route.meta.contentFrame)
const contentContent = computed(() => {
switch (contentFrame.value) {
case 'cf-container-lg':
return 'cf-frame cf-container-lg-content'
case 'cf-container-md':
return 'cf-frame cf-container-md-content'
case 'cf-container-sm':
return 'cf-frame cf-container-sm-content'
case 'cf-full-width':
return 'cf-frame-width'
default:
return 'cf-frame'
}
})
</script>
<template>
<SidebarProvider>
@@ -6,10 +23,70 @@
<SidebarInset>
<LayoutHeader />
<div class="w-full min-w-0 flex-1 overflow-x-auto p-4 lg:p-6">
<slot />
<div v-if="contentFrame !== 'cf-no-frame'" class="contentFrame">
<div :class="`${contentContent} ${contentFrame}`">
<slot />
</div>
</div>
<slot v-else />
</div>
</SidebarInset>
</SidebarProvider>
</template>
<style scoped></style>
<style scoped>
.cf-container,
.cf-container-lg,
.cf-container-md,
.cf-container-sm {
container-type: inline-size;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 5rem;
}
.cf-container > *,
.cf-container-lg > *,
.cf-container-md > *,
.cf-container-sm > *,
.cf-full-width {
margin-left: auto;
margin-right: auto;
padding: 0.75rem; /* p-3 */
padding-bottom: 5rem; /* pb-20 */
border-width: 1px;
background-color: white !important;
border-color: rgb(226 232 240); /* slate-200 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cf-container-lg > * {
max-width: 992px;
}
.cf-container-md > * {
max-width: 768px;
}
.cf-container-sm > * {
max-width: 576px;
}
.cf-frame-width {
margin-left: auto;
margin-right: auto;
padding: 0.75rem;
background-color: white;
border: 1px solid rgb(226 232 240);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cf-frame {
margin-left: auto;
margin-right: auto;
padding: 0.75rem;
background-color: white;
border: 1px solid rgb(226 232 240);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
app/lib/page-permission.ts
+10
View File
@@ -0,0 +1,10 @@
export const PAGE_PERMISSIONS = {
'/patient': {
doctor: ['R'],
nurse: ['R'],
admisi: ['C', 'R', 'U', 'D'],
pharmacy: ['R'],
billing: ['R'],
management: ['R'],
},
} as const
app/middleware/auth.global.ts
+10 -4
View File
@@ -1,4 +1,6 @@
export default defineNuxtRouteMiddleware((to) => {
if (to.meta.public) return
const { $pinia } = useNuxtApp()
if (import.meta.client) {
@@ -10,9 +12,13 @@ export default defineNuxtRouteMiddleware((to) => {
return navigateTo('/auth/login')
}
const allowedRoles = to.meta.roles as string[] | undefined
if (allowedRoles && !allowedRoles.includes(userStore.userRole)) {
return navigateTo('/unauthorized')
}
// const allowedRoles = to.meta.roles as string[] | undefined
// if (allowedRoles && !allowedRoles.includes(userStore.userRole)) {
// return navigateTo('/unauthorized')
// }
// const allowedRoles = to.meta.roles as string[] | undefined
// if (allowedRoles && !userStore.userRole.some((r) => allowedRoles.includes(r))) {
// return navigateTo('/unauthorized')
// }
}
})
app/middleware/rbac.ts
+37
View File
@@ -0,0 +1,37 @@
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
export default defineNuxtRouteMiddleware((to) => {
if (to.meta.public) return
const { $pinia } = useNuxtApp()
if (import.meta.server) {
const authStore = useUserStore($pinia)
// Check specific page permissions if defined in config
const pagePermissions = PAGE_PERMISSIONS[to.path as keyof typeof PAGE_PERMISSIONS]
if (pagePermissions) {
const { checkRole } = useRBAC()
if (!checkRole(pagePermissions)) {
throw createError({
statusCode: 403,
statusMessage: 'Forbidden - Insufficient permissions for this page',
})
}
}
// Fallback to meta roles
const requiredRoles = to.meta.roles as string[]
if (requiredRoles && requiredRoles.length > 0) {
// FIXME: change this dummy roles, when api is ready
// const userRoles = authStore.roles
const userRoles = ['admisi']
const hasRequiredRole = requiredRoles.some((role) => userRoles.includes(role))
if (!hasRequiredRole) {
throw createError({
statusCode: 403,
statusMessage: 'Forbidden - Insufficient role permissions',
})
}
}
}
})
app/models/role.ts
+22
View File
@@ -0,0 +1,22 @@
import type { PAGE_PERMISSIONS } from '~/lib/page-permission'
export interface User {
id: string
name: string
email: string
}
export interface AuthState {
user: User | null
roles: string[]
token: string | null
}
export type Permission = 'C' | 'R' | 'U' | 'D'
export interface RoleAccess {
[role: string]: Permission[]
}
export type PagePath = keyof typeof PAGE_PERMISSIONS
export type PagePermission = (typeof PAGE_PERMISSIONS)[PagePath]
app/pages/(features)/patient/add.vue
+29 -2
View File
@@ -1,9 +1,36 @@
<script setup lang="ts">
import type { PagePermission } from '~/models/role'
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
definePageMeta({
roles: ['sys', 'doc'],
middleware: ['rbac'],
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
pageTitle: 'Patient',
contentFrame: 'cf-full-width',
})
const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
const { checkRole, hasCreateAccess } = useRBAC()
// Check if user has access to this page
const hasAccess = checkRole(roleAccess)
if (!hasAccess) {
throw createError({
statusCode: 403,
statusMessage: 'Access denied',
})
}
// Define permission-based computed properties
const canCreate = hasCreateAccess(roleAccess)
</script>
<template>
<FlowPatientAdd />
<div v-if="canCreate">
<FlowPatientAdd />
</div>
<div v-else>
<p>You don't have permission to create patient records.</p>
</div>
</template>
app/pages/(features)/patient/index.vue
+29 -2
View File
@@ -1,11 +1,38 @@
<script setup lang="ts">
import type { PagePermission } from '~/models/role'
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
definePageMeta({
roles: ['sys', 'doc'],
middleware: ['rbac'],
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
pageTitle: 'Patient',
contentFrame: 'cf-full-width',
})
const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
const { checkRole, hasReadAccess } = useRBAC()
// Check if user has access to this page
const hasAccess = checkRole(roleAccess)
if (!hasAccess) {
throw createError({
statusCode: 403,
statusMessage: 'Access denied',
})
}
// Define permission-based computed properties
const canRead = hasReadAccess(roleAccess)
</script>
<template>
<div>
<FlowPatientList />
<div v-if="canRead">
<FlowPatientList />
</div>
<div v-else>
<p>You don't have permission to view patient records.</p>
</div>
</div>
</template>
app/pages/auth/login.vue
+1
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
definePageMeta({
layout: 'blank',
public: true,
})
</script>