feat(medcat-trainer): Remove callback URL fragments after successful login.

medcat-trainer/webapp/frontend/src/main.ts

@@ -11,7 +11,7 @@ import '@/assets/main.css'
 import { createApp } from 'vue'
 
 import App from './App.vue'
-import router from './router'
+import { initialiseRouter } from './router'
 import axios from 'axios'
 import VueCookies from 'vue-cookies'
 import vSelect from 'vue-select'
@@ -55,7 +55,6 @@ async function bootstrap() {
   app.component("v-select", vSelect)
   app.component('vue-simple-context-menu', VueSimpleContextMenu)
   app.component('font-awesome-icon', FontAwesomeIcon)
-  app.use(router)
   app.use(VueCookies, { expires: '7d'})
   app.use(vuetify);
 
@@ -81,6 +80,10 @@ async function bootstrap() {
   }
 
   app.config.compilerOptions.whitespace = 'preserve'
+
+  // Router is initialized and created after keycloak initialisation as a workaround to URL fragments not being removed after successful login
+  // See: https://github.com/keycloak/keycloak/issues/14742#issuecomment-1663069438
+  app.use(initialiseRouter())
   app.mount('#app')
 }
 

medcat-trainer/webapp/frontend/src/router/index.ts

@@ -9,9 +9,10 @@ import ProjectAdmin from '../views/ProjectAdmin.vue'
 import { isOidcEnabled } from '../runtimeConfig'
 
 
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
+const initialiseRouter = () => {
+  return createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
       {
           path: '/train-annotations/:projectId/:docId?',
           name: 'train-annotations',
@@ -50,7 +51,7 @@ const router = createRouter({
             // For OIDC: backend will handle permission check
             const useOidc = isOidcEnabled()
             let isAdmin = false
-            
+
             if (!useOidc) {
               // Check cookie for admin status
               const cookies = document.cookie.split(';').reduce((acc, cookie) => {
@@ -64,7 +65,7 @@ const router = createRouter({
               // The backend API endpoint already checks permissions
               isAdmin = true
             }
-            
+
             if (isAdmin) {
               next()
             } else {
@@ -78,9 +79,11 @@ const router = createRouter({
           name: 'home',
           component: Home
       }
-  ]
-})
+    ]
+  })
+}
+
 
-export default router
+export { initialiseRouter }