✨ feat (auth): implement global authentication middleware

app/middleware/auth.global.ts

@@ -0,0 +1,18 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { $pinia } = useNuxtApp()
+
+  if (import.meta.client) {
+    const userStore = useUserStore($pinia)
+
+    console.log('currRole', userStore.userRole)
+    console.log('isAuth', userStore.isAuthenticated)
+    if (!userStore.isAuthenticated) {
+      return navigateTo('/auth/login')
+    }
+
+    const allowedRoles = to.meta.roles as string[] | undefined
+    if (allowedRoles && !allowedRoles.includes(userStore.userRole)) {
+      return navigateTo('/unauthorized')
+    }
+  }
+})

app/middleware/auth.ts

@@ -1,7 +0,0 @@
-export default defineNuxtRouteMiddleware((to, from) => {
-  // TODO: change this to actual api
-  const user = true
-  if (!user) {
-    return navigateTo('/auth/login')
-  }
-})

app/pages/(features)/patient/[id]/detail.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
 <template>
   <div>detail pasien</div>
 </template>

app/pages/(features)/patient/[id]/edit.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
 <template>
   <div>edit pasien</div>
 </template>

app/pages/(features)/patient/add.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
 <template>
   <FlowPatientAdd />
 </template>

app/pages/(features)/patient/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
-  roles: ['system', 'doctor'],
+  roles: ['sys', 'doc'],
 })
 </script>
 

app/types/index.d.ts

@@ -0,0 +1,16 @@
+// app/types/index.d.ts
+import type { Pinia } from 'pinia'
+
+declare module '#app' {
+  interface NuxtApp {
+    $pinia: Pinia
+  }
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $pinia: Pinia
+  }
+}
+
+export {}