Fix issues with OIDC and Vue Router

Author: m-mohr

src/StacBrowser.vue

@@ -113,8 +113,8 @@ for(let key in CONFIG) {
     default: ['object', 'function'].includes(typeof CONFIG[key]) ? () => CONFIG[key] : CONFIG[key]
   };
   Watchers[key] = {
-    immediate: false, // Changed from true to avoid accessing store before it's ready
-    deep: ['object', 'array'].includes(typeof CONFIG[key]), // Deep watch for objects and arrays
+    immediate: true,
+    deep: ['object', 'array'].includes(typeof CONFIG[key]),
     handler: async function(newValue) {
       await this.$store.dispatch('config', {
         [key]: newValue

src/auth/apiKey.js

@@ -3,8 +3,8 @@ import i18n from '../i18n';
 
 export default class ApiKey extends Auth {
 
-  constructor(options, changeListener, router) {
-    super(options, changeListener, router);
+  constructor(router, options, changeListener) {
+    super(router, options, changeListener);
   }
 
   getButtonTitle() {
@@ -22,7 +22,7 @@ export default class ApiKey extends Auth {
   }
 
   async logout(/*credentials*/) {
-    if (this.router.currentRoute.name !== 'logout') {
+    if (this.router.currentRoute.value.name !== 'logout') {
       this.router.push('/auth/logout');
     }
     return true;

src/auth/basic.js

@@ -4,8 +4,8 @@ import Utils from "../utils";
 
 export default class BasicAuth extends Auth {
 
-  constructor(options, changeListener, router) {
-    super(options, changeListener, router);
+  constructor(router, options, changeListener) {
+    super(router, options, changeListener);
   }
 
   getComponent() {
@@ -23,7 +23,7 @@ export default class BasicAuth extends Auth {
   }
 
   async logout(/*credentials*/) {
-    if (this.router.currentRoute.name !== 'logout') {
+    if (this.router.currentRoute.value.name !== 'logout') {
       this.router.push('/auth/logout');
     }
     return true;

src/auth/index.js

@@ -6,11 +6,11 @@ export default class Auth {
   /**
    * Constructs the authentication method.
    * 
+   * @param {Router} router The Vue router instance
    * @param {Object.<string, *>} options  Any potential options the authentication method needs
    * @param {Function} changeListener A change listener with two parameters: loggedIn (boolean) and credentials (string|null)
-   * @param {Router} router The Vue router instance
    */
-  constructor(options = {}, changeListener = null, router = null) {
+  constructor(router, options = {}, changeListener = null) {
     this.options = options;
     this.changeListener = changeListener;
     this.router = router;
@@ -114,20 +114,20 @@ export default class Auth {
     }
   }
 
-  static async create(config, changeListener, router) {
-    let method = new Auth();
+  static async create(router, config, changeListener) {
+    let method = new Auth(router, config, changeListener);
     if (Utils.isObject(config)) {
       if (config.type === 'http' && config.scheme === 'basic') {
         const BasicAuth = (await import('./basic')).default;
-        method = new BasicAuth(config, changeListener, router);
+        method = new BasicAuth(router, config, changeListener);
       }
       else if (config.type === 'apiKey') {
         const ApIKey = (await import('./apiKey')).default;
-        method = new ApIKey(config, changeListener, router);
+        method = new ApIKey(router, config, changeListener);
       }
       else if (config.type === 'openIdConnect') {
         const OIDC = (await import('./oidc')).default;
-        method = new OIDC(config, changeListener, router);
+        method = new OIDC(router, config, changeListener);
       }
     }
     await method.init();

src/auth/oidc.js

@@ -6,8 +6,8 @@ import { UserManager } from 'oidc-client-ts';
 
 export default class OIDC extends Auth {
 
-  constructor(options, changeListener, router) {
-    super(options, changeListener, router);
+  constructor(router, options, changeListener) {
+    super(router, options, changeListener);
 
     const oidcConfig = {
       authority: options.openIdConnectUrl.replace('/.well-known/openid-configuration', ''),
@@ -26,7 +26,7 @@ export default class OIDC extends Auth {
   }
 
   setOriginalUri() {
-    this.browserStorage.set('oidc-original-uri', this.router?.currentRoute?.fullPath || window.location.href);
+    this.browserStorage.set('oidc-original-uri', this.router.currentRoute.value.fullPath);
   }
 
   restoreOriginalUri() {

src/store/auth.js

@@ -18,7 +18,7 @@ export default function getStore(router) {
       // Wrap in a function and use the getter instead of the state
       // Unfortunately, some auth libraries have internal state, which vuex doesn't like
       // and thus reports: "do not mutate vuex store state outside mutation handlers."
-      method: () => new Auth(),
+      method: () => new Auth(router),
       actions: [],
       credentials: null,
       inProgress: false
@@ -82,7 +82,7 @@ export default function getStore(router) {
         const storage = new BrowserStorage(true);
         storage.set('authConfig', config);
 
-        const newAuth = await Auth.create(config, changeListener, router);
+        const newAuth = await Auth.create(router, config, changeListener);
         cx.commit('setMethod', newAuth);
       },
       async requestLogin(cx) {