oidc-vue-test/src/main.ts

import { createApp, ref } from 'vue'
import Keycloak from "keycloak-js"
import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
import axios, { type AxiosInstance } from 'axios'
import App from './App.vue'

interface Settings {
  keycloakUri: string
  realm: string
  clientId: string
  sso: boolean
  resourceServerUrl: string
  resourceScopes: string[]
  authProvider: string
  tokenSandbox: boolean
}

export interface Resource {
  name: string
}

export interface Resources {
  [name: string]: Resource
}

export let settings: Settings
export let authServer: AxiosInstance
export let resourceServer: AxiosInstance

// The settings.json file is expected at the server's base url
axios.get("settings.json").then().then(
  resp => {
    settings = resp.data
    resourceServer = axios.create({
      baseURL: settings.resourceServerUrl,
      timeout: 10000
    })
    authServer = axios.create({
      baseURL: '/',
      timeout: 10000
    })
    app.use(VueKeycloakJs, {
      config: {
        url: settings.keycloakUri,
        realm: settings.realm,
        clientId: settings.clientId
      },
      init: {
        onLoad: settings.sso ? "check-sso" : "login-required",
        scope: "openid email profile " + settings.resourceScopes.join(" ")
      },
      onReady(keycloak: Keycloak) {
        initializeTokenInterceptor(keycloak)
        checkPerms('links-to-check')
      },
    })
    app.mount("#app")
  }
)


function initializeTokenInterceptor(keycloak: Keycloak) {
  authServer.interceptors.request.use(axiosSettings => {
    if (keycloak.authenticated) {
      axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`
      axiosSettings.headers.auth_provider = settings.authProvider
    }
    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.authProvider
    }
    return axiosSettings
  }, error => {
    return Promise.reject(error)
  })
}

export async function checkResource(elem: HTMLLinkElement) {
  const url = elem.getAttribute("resource-name")
  if (!url) return
  await resourceServer.get(url).then(
    resp => {
      elem.classList.add("hasResponseStatus")
      elem.classList.add("status-" + resp.status)
      elem.title = "Response code: " + resp.status + " - " + resp.statusText
    }).catch(err => {
      elem.classList.add("hasResponseStatus")
      elem.classList.add("status-" + err.response.status)
      elem.title = "Response code: " + err.response.status + " - " + err.response.statusText
    })
}

function checkPerms(className: string) {
  // Scan elements with className and check the respose
  var rootElems = document.getElementsByClassName(className)
  Array.from(rootElems).forEach(elem =>
    Array.from(elem.children).forEach(elem => checkResource(<HTMLLinkElement>elem))
  )
}

const app = createApp(App)