added keycloak auth and roles

added keycloak sign in auth in frontend. added 3 roles and navigation guards from the roles
Randers-Kommune-Digitalisering · Dec 11, 2024 · 8d5d3ce · 8d5d3ce
1 parent 114f603
commit 8d5d3ce
Show file tree

Hide file tree

Showing 12 changed files with 496 additions and 202 deletions.
diff --git a/vue/package.json b/vue/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "axios": "^1.5.1",
+    "dotenv": "^16.4.7",
+    "keycloak-js": "^26.0.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },

diff --git a/vue/src/App.vue b/vue/src/App.vue
@@ -1,17 +1,17 @@
 <script setup>
 import { ref } from 'vue';
+import Header from './components/Menu.vue';
+import SignInButton from './components/SignInButton.vue';
 
-import Header from './components/Menu.vue'
-const headerComponent = ref(null)
-const currentComponent = ref(null)
+const headerComponent = ref(null);
+const currentComponent = ref(null);
 
 const setHeaderAlert = (headerItemTitle, alertText) => {
-    headerComponent.value.setAlert(headerItemTitle, alertText)
+    headerComponent.value.setAlert(headerItemTitle, alertText);
 };
 </script>
 
 <template>
-
   <header>
     <div id="logo-container">
         <svg id="logo" class="desktop-only w-196px" viewBox="0 0 243 36" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
@@ -21,14 +21,14 @@ const setHeaderAlert = (headerItemTitle, alertText) => {
         <span class="logo-subtext semi-bold uppercase desktop-only">Onboardingmodul</span>
     </div>
     <Header ref="headerComponent" />
+    <SignInButton />
   </header>
 
   <main>
       <div class="content">
           <router-view ref="currentComponent" @onHeaderAlert="setHeaderAlert"></router-view>
       </div>
   </main>
-
 </template>
 
 <style scoped>