Vue 3 accessing vue instance in vue router. Outside a Vue file

Question

I'm stuck with this since awhile. I want to access my keycloak instance from within the vue router.js file.

const preventRoutes = {
  beforeEnter: (to, from, next) => {
    console.log(App.$keycloak.authenticated); //here. (Undefined)
    if (store.getters.getLoginState === "true") {
      ...
    } else {
      ...
    }
  }
}

access vue 3 app instance api from non-vue fiile

I'm trying this solution. As it's the only VUE3 I can find, but still, I think he skipped some steps. Can someone simplify please?

Adviced Solution

const preventRoutes = {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // access to component instance via `vm`
      // console.log(vm.$keycloak.authenticated);
      if (this.vm.$keycloak.authenticated) {
        next();
      } else {
        next("/");
      }
    })
  }
}

main.js

const myApp = createApp(App)

let initOptions = {
  url: KeycloakConfig["auth-server-url"], realm: KeycloakConfig.realm, clientId: KeycloakConfig.resource, clientSecret: KeycloakConfig.credentials.secret
}

const keycloak = Keycloak(initOptions)

myApp.config.globalProperties.$keycloak = keycloak;
myApp.use(VueAxios, axios)
myApp.use(store)
myApp.use(router)
myApp.mount("#app");

keycloak.init({
  onLoad: "check-sso",

  checkLoginIframe: false
}).then(async (auth) => {
  if (!auth) {

  } else if (auth) {
    router.push("/dashboard"); 
  }
}).catch((e) => {
  console.log('Serwer lezy: ' + e)
})

Answer 1

I have another solution (maybe its more a workaround, but it feels kinda correct)

You could wrap your router inside a custom plugin install method, like:

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

export default {
    install(app, options) {
        router.install(app)

        router.beforeEach((to, from, next) => {
            // access all used plugins
            console.log(app.config.globalProperties.$store)
            console.log(app.config.globalProperties.$First)
            // ... stuff ...
        });
    },
};

In your main.js you can just use(...) the router like before:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import * as plugins from "./plugins";

const app = createApp(App)

app.use(store)
   .use(plugins.First)
   .use(plugins.Second)
   .use(router, app) // add "app" as second param, that way you can access the store and every other plugin within the router
   .mount("#app");

Answer 2

This worked for me:

//main.js
const app = createApp(App)
app.provide('app', app)

//router.js
router.beforeEach(function(to, from, next) {
  const app = inject('app');
  console.log(app.$keycloak.authenticated)
})