feat(FE) : json role

composables/useAuth.ts

@@ -27,6 +27,20 @@ export const useAuth = () => {
       if (response && response.user) {
         user.value = response.user
         accessToken.value = response.accessToken || null
+        
+        // Store tokens to localStorage for API interceptor (only on client-side)
+        if (process.client) {
+          if (response.idToken) {
+            localStorage.setItem('idToken', response.idToken)
+          }
+          if (response.accessToken) {
+            localStorage.setItem('accessToken', response.accessToken)
+          }
+          if (response.refreshToken) {
+            localStorage.setItem('refreshToken', response.refreshToken)
+          }
+        }
+        
         return response.user
       }
       
@@ -44,6 +58,14 @@ export const useAuth = () => {
       }
       user.value = null
       accessToken.value = null
+      
+      // Clear tokens from localStorage on auth failure
+      if (process.client) {
+        localStorage.removeItem('idToken')
+        localStorage.removeItem('accessToken')
+        localStorage.removeItem('refreshToken')
+      }
+      
       return null
     } finally {
       isLoading.value = false
@@ -87,6 +109,11 @@ export const useAuth = () => {
       accessToken.value = null
       
       if (response?.success && response?.logoutUrl) {
+        //remove all tokens from localstorage
+        localStorage.removeItem('idToken');
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+
         console.log('🔗 Redirecting to Keycloak logout...')
         // Keycloak will redirect back to the base URL after logout
         // We can add a query param to detect the logout and show a message

composables/useHakAkses.ts

@@ -0,0 +1,81 @@
+// composables/useHakAkses.ts
+// Composable for handling user permissions/access based on hakAkses
+import { useAuth } from "~/composables/useAuth";
+
+export const useHakAkses = () => {
+    const {user, checkAuth} = useAuth();
+    
+    /**
+     * Get all pages that user has access to based on their roles
+     */
+    const getAllowedPages = async (): Promise<string[]> => {
+        // Pastikan user sudah ter-load dari cookie/session
+        // Jika user.value masih null, panggil checkAuth() untuk load dari API session
+        if (!user.value) {
+            console.log('🔄 User belum ter-load, memanggil checkAuth()...');
+            await checkAuth();
+        }
+        
+        const currentUser = user.value;
+        console.log('Current User in getAllowedPages:', currentUser);
+        
+        if (!currentUser || !currentUser.roles || currentUser.roles.length === 0) {
+            console.log('⚠️ User tidak memiliki roles');
+            return [];
+        }
+
+        
+        try {
+            // Fetch all hak akses data
+            const response = await $fetch('/api/hak-akses');
+            
+            if (response && typeof response === 'object' && 'success' in response && response.success && 'data' in response) {
+                const hakAksesList = Array.isArray(response.data) ? response.data : [];
+                
+                // Filter hak akses that match user's roles and are active
+                const userHakAkses = hakAksesList.filter((hakAkses: any) => 
+                    currentUser.roles?.includes(hakAkses.namaHakAkses) && 
+                    hakAkses.status === 'aktif'
+                );
+                
+                // Combine all pages from all matching hak akses
+                const allPages = userHakAkses.reduce((pages: string[], hakAkses: any) => {
+                    if (hakAkses.pages && Array.isArray(hakAkses.pages)) {
+                        return [...pages, ...hakAkses.pages];
+                    }
+                    return pages;
+                }, []);
+                
+                // Remove duplicates
+                return [...new Set(allPages)];
+            }
+            
+            return [];
+        } catch (error) {
+            console.error('Error fetching allowed pages:', error);
+            return [];
+        }
+    };
+    
+    /**
+     * Check if user has access to a specific page
+     */
+    const hasPageAccess = async (pagePath: string): Promise<boolean> => {
+        const allowedPages = await getAllowedPages();
+        return allowedPages.includes(pagePath);
+    };
+    
+    /**
+     * Check if user has access to any page in a list
+     */
+    const hasAnyPageAccess = async (pagePaths: string[]): Promise<boolean> => {
+        const allowedPages = await getAllowedPages();
+        return pagePaths.some(path => allowedPages.includes(path));
+    };
+    
+    return {
+        getAllowedPages,
+        hasPageAccess,
+        hasAnyPageAccess
+    };
+};

composables/useRoles.ts

@@ -0,0 +1,72 @@
+// composables/useRoles.ts
+// Composable for role-based access control on client side
+
+export const useRoles = () => {
+    const { user } = useUserInfo();
+    
+    /**
+     * Check if current user has a specific role
+     */
+    const hasRole = (role: string): boolean => {
+        const currentUser = user.value;
+        if (!currentUser || !currentUser.roles) {
+            return false;
+        }
+        
+        return currentUser.roles.includes(role);
+    };
+    
+    /**
+     * Check if current user has any of the specified roles
+     */
+    const hasAnyRole = (roles: string[]): boolean => {
+        const currentUser = user.value;
+        if (!currentUser || !currentUser.roles) {
+            return false;
+        }
+        
+        return roles.some(role => currentUser.roles?.includes(role));
+    };
+    
+    /**
+     * Check if current user has all of the specified roles
+     */
+    const hasAllRoles = (roles: string[]): boolean => {
+        const currentUser = user.value;
+        if (!currentUser || !currentUser.roles) {
+            return false;
+        }
+        
+        return roles.every(role => currentUser.roles?.includes(role));
+    };
+    
+    /**
+     * Get all roles of current user
+     */
+    const getRoles = (): string[] => {
+        return user.value?.roles || [];
+    };
+    
+    /**
+     * Get realm roles only
+     */
+    const getRealmRoles = (): string[] => {
+        return (user.value as any)?.realm_roles || [];
+    };
+    
+    /**
+     * Get client roles only
+     */
+    const getClientRoles = (): string[] => {
+        return (user.value as any)?.client_roles || [];
+    };
+    
+    return {
+        hasRole,
+        hasAnyRole,
+        hasAllRoles,
+        getRoles,
+        getRealmRoles,
+        getClientRoles
+    };
+};