first pass of RBAC systems

ui/src/pages/Unauthorized.vue

@@ -10,10 +10,6 @@
             <Button variant="default" @click="goHome">
                 Go to Home
             </Button>
-
-            <Button variant="outline" @click="loginIfNeeded">
-                Log In
-            </Button>
         </div>
     </div>
 </template>
@@ -21,7 +17,7 @@
 <script setup lang="ts">
 import Button from '@/components/ui/button/Button.vue'
 import { useRouter } from 'vue-router'
-import { useUserStore } from '@/stores/user' // adjust path to your store
+import { useUserStore } from '@/stores/user'
 
 const router = useRouter()
 const user = useUserStore()
@@ -29,12 +25,4 @@ const user = useUserStore()
 function goHome() {
     router.push('/')
 }
-
-function loginIfNeeded() {
-    if (!user.isLoggedIn) {
-        window.location.href = 'https://your-auth-service/login'
-    } else {
-        router.push('/')
-    }
-}
 </script>

ui/src/router/index.js

@@ -37,16 +37,16 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to) => {
-  const userStore = useUserStore()
+  const user = useUserStore()
 
   // Make sure user state is loaded before checking
-  if (!userStore.loaded) {
+  if (!user.loaded) {
     console.log('loaduser')
-    await userStore.loadUser();
+    await user.loadUser();
   }
 
   // Not logged in
-  if (to.meta.requiresAuth && !userStore.isLoggedIn) {
+  if (to.meta.requiresAuth && !user.isLoggedIn) {
     // Redirect back to original page after login
     const redirectUrl = encodeURIComponent(window.location.origin + to.fullPath)
     window.location.href = `https://aj17thdevapi.nexuszone.net/login?redirect=${redirectUrl}`
@@ -55,14 +55,16 @@ router.beforeEach(async (to) => {
 
 
   // Must be a member
-  if (to.meta.memberOnly && userStore.state !== 'member') {
+  if (to.meta.memberOnly && user.state !== 'member') {
     return '/unauthorized'
   }
 
-  // // Must have specific role
-  // if (to.meta.roles && !to.meta.roles.includes(userStore.role)) {
-  //   return '/unauthorized'
-  // }
+  console.log(!user.hasRole("Dev"));
+
+  // Must have specific role
+  if (to.meta.roles && !user.hasRole('Dev') && !user.hasAnyRole(to.meta.roles)) {
+    return '/unauthorized'
+  }
 })
 
 export default router;

ui/src/stores/user.ts

@@ -3,9 +3,9 @@ import { defineStore } from 'pinia'
 
 export const useUserStore = defineStore('user', () => {
     const user = ref(null)
-    const roles = computed(() => { user.value.roles })
+    const roles = computed(() => new Set(user.value?.roleData?.map(r => r.name) ?? []));
     const loaded = ref(false);
-
+    const state = computed(() => user.value.state);
     const isLoggedIn = computed(() => user.value !== null)
 
     async function loadUser() {
@@ -23,5 +23,15 @@ export const useUserStore = defineStore('user', () => {
         loaded.value = true;
     }
 
-    return { user, isLoggedIn, roles, loadUser, loaded }
+
+    function hasRole(role: string): boolean {
+        return roles.value.has(role)
+    }
+
+
+    function hasAnyRole(requiredRoles: string[]): boolean {
+        return requiredRoles.some(r => roles.value.has(r))
+    }
+
+    return { user, isLoggedIn, roles, loadUser, loaded, hasAnyRole, hasRole, state }
 })