Cleanup

package.json

@@ -11,7 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
-    "@dsb-norge/vue-keycloak-js": "3.0.1",
+    "@dsb-norge/vue-keycloak-js": "^3.0.1",
     "axios": "1.7.9",
     "keycloak-js": "^26.1.0",
     "vue": "3.5.13"

pnpm-lock.yaml

@@ -9,7 +9,7 @@ importers:
   .:
     dependencies:
       '@dsb-norge/vue-keycloak-js':
-        specifier: 3.0.1
+        specifier: ^3.0.1
         version: 3.0.1(vue@3.5.13(typescript@5.6.3))
       axios:
         specifier: 1.7.9

src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { HTTP } from '@/main'
+import { authServer, resourceServer } from '@/main'
 import type { AxiosResponseHeaders } from 'axios'
 import { ref } from 'vue'
+import Keycloak from "keycloak-js"
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
 import { settings } from '../settings'
 
@@ -17,7 +18,7 @@ function manuallyRefreshAccessToken() {
 async function doAuthenticatedRequest() {
   // Doesn't really go anywhere, but as you see from the headers in the request
   // it contains the latest access token at all times
-  const response = await HTTP.get('/oidc-test-web')
+  const response = await authServer.get('/oidc-test-web')
   requestHeaders.value = response.config.headers
 }
 
@@ -30,13 +31,16 @@ function accountManagemnt() {
 }
 
 async function get_resource(id: string) {
-  await HTTP.get(`${settings.url}/${id}`).then(
+  if (!keycloak.keycloak) { return }
+  await keycloak.keycloak.updateToken(5000)
+  await resourceServer.get(id).then(
     resp => resource.value = resp['data']
   )
 }
 </script>
 
 <template>
+  <div id="app">
     <h1>OIDC-test - web client</h1>
     <p class="center">
       Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider.
@@ -77,4 +81,5 @@ async function get_resource(id: string) {
       <div class="token" :innerText="requestHeaders?.toString()">
       </div>
     </div>
+  </div>
 </template>

src/main.ts

@@ -1,38 +1,54 @@
 import { createApp } from 'vue'
 import Keycloak from "keycloak-js"
-import VueKeycloakJs, { useKeycloak } from '@dsb-norge/vue-keycloak-js'
+import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
 import axios from 'axios'
 import App from './App.vue'
-import { settings as app_settings } from "../settings"
+import { settings } from "../settings"
 
-export const HTTP = axios.create({
+export const authServer = axios.create({
   baseURL: '/',
   timeout: 10000
 })
 
-function initializeTokenInterceptor() {
-  HTTP.interceptors.request.use(settings => {
-    const keycloak = useKeycloak()
+export const resourceServer = axios.create({
+  baseURL: settings.url,
+  timeout: 10000
+})
+
+function initializeTokenInterceptor(keycloak: Keycloak) {
+  authServer.interceptors.request.use(axiosSettings => {
     if (keycloak.authenticated) {
-      settings.headers.Authorization = `Bearer ${keycloak.token}`
-      settings.headers.auth_provider = app_settings.auth_provider
+      axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`
+      axiosSettings.headers.auth_provider = settings.auth_provider
     }
-    return settings
+    return axiosSettings
+  }, error => {
+    return Promise.reject(error)
+  })
+  resourceServer.interceptors.request.use(axiosSettings => {
+    if (keycloak.authenticated) {
+      axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`
+      axiosSettings.headers.auth_provider = settings.auth_provider
+    }
+    return axiosSettings
   }, error => {
     return Promise.reject(error)
   })
 }
 
-createApp(App)
-  .use(VueKeycloakJs, {
+const app = createApp(App)
+app.mount('#app')
+app.use(VueKeycloakJs, {
   config: {
     url: 'https://philo.ydns.eu/auth/',
     realm: 'test',
     clientId: 'oidc-test-web',
   },
-    init: { onLoad: app_settings.sso ? 'check-sso' : 'login-required' },
-    onReady(keycloak: Keycloak, vkk) {
-      initializeTokenInterceptor()
+  init: {
+    onLoad: settings.sso ? 'check-sso' : 'login-required',
+    scope: "openid email profile get:time get:bs"
+  },
+  onReady(keycloak: Keycloak) {
+    initializeTokenInterceptor(keycloak)
   },
 })
-  .mount('#app')