Using keycloak inside vue router

[aminmc]

Hello

I'm new to Vue 3 and I'm trying to integrate this library with my vue application. I'm using vue router and I need access to the keycloak attributes from the useKeycloak() hook. For example:

const routes = [
    {
        path: '/',
        name: 'Dashboard',
        component: Dashboard,
    },
    {
        path: "/:catchAll(.*)",
        redirect: '/'
    }
];

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


router.beforeEach((to, from, next) => {
    next();

});
export default router

What I'd like to do is do some additional checks before sending to the actual route. What is the best way to access the keycloak object within the beforeEach? I've tried using the useKeycloak() but the data isn't available.

Any help would be appreciated.

[1pm]

Hi @aminmc,
did you manage to solve this?
I ran to same situation and isAuthenticated value is always false when checked in router.beforeEach()

[DavidzMwangi]

Hi @aminmc or @1pm ,
Were you able to solve this? Am also stuck on that

[1pm]

Hi @DavidzMwangi,
I solved it by adding before hook and creating custom wrapper for keycloak-js

// Restrict access to non-public routes
router.beforeEach(async to => {
  if (!to.meta.isPublic) {
    await keycloak.login()
  }
})

The key was to properly check whether user is already authenticated before calling kc.login(). I just simply set flag isAuthenticated in onAuthRefreshSuccess and onAuthRefreshError and other available events. Then checks this flag before calling the actual kc.login()