Infinite redirection loop with vue-router default mode "hash"

[rgrosjean]

Hi,
it's more a question that a real issue, because I'm not sure if I configured something wrong or if I missed something.
The plugin works great with vue and vue-router when it's configured to use the mode history. If the default mode "hash" is set, after completing login, the page is redirected indefinitely.
Do you have any clue?

Thanks!

[nlien]

Hi! Sorry for the really late reply.
I've noticed the same behaviour you describe, but I haven't figured out the cause of this.
My solution was to just go for the history mode. If you ever find a solution to this, I'll be really grateful for a PR.

[rgrosjean]

Hi, no problem.
I did not find any other workaround as to use the history mode. There is something with the # in the query string. Probably because Keycloak use it to pass some parameter.

[neowinx]

I have this same problem, but it seems that it is not only with Vue.js, other frameworks suffer from this issue to as per

https://www.google.com.py/search?q=redirect_fragment&oq=redirect_fragment&aqs=chrome..69i57j69i60l3j0l2.295j0j7&sourceid=chrome&ie=UTF-8

I will use the history mode in the meantime

Good Luck!

[ChuckFields]

I've experienced this infinite redirect and I have a workaround to allow you to continue to use the default hash mode with the VueRouter. Take a look at how I initialize my vue app:

keycloak.init().success((authenticated) => {
  if (authenticated) {
    // The VueRouter plugin gets installed via Vue.use(VueRouter) inside of our ./router
    // We need to dynamically import our vue router here because otherwise it will install this plugin
    // before Keycloak is done and will cause an infinite redirect
    import('./router')
      .then((router) => {
        new Vue({
          el: '#app',
          router: router.default,
          store,
          render: h => h(App)
        });
      });
  }
});

Essentially, we need to wait until Keycloak is done doing its thing before installing the VueRouter plugin.

However, now i'm running into another (minor) issue.
If I do the following steps:

1. login (I'm now at /#/dashboard)
2. navigate to /#/admin
3. wait for my access token to expire and fetch a new one
4. logout

When I log back in I will end up at /#/dashboard instead if /#/admin
If however, I remove step 3 from above, I will end up back at /#/admin
I'm still trying to figure this one out.

[alfreema]

Is anybody actively working on a fix/work around for this issue?

[anderius]

No, but any help would be greatly appreciated!

[zg2pro]

Hi all!

I also encountered this issue and found a workaround

(as delaying the vue-router like @ChuckFields didnt work for me): actually my router runs after the VueKeycloak init anyways but still it turned around and around and around on itself...

So, I switched from "login-required" to the "check-sso" mode, BUT, to be able to still get redirected to my keycloak interface, I put this in my router.js:

router.beforeEach((to, from, next) => {
  if (!router.app.$keycloak.authenticated) {
    window.location.replace(router.app.$keycloak.createLoginUrl());
  }
(...)
next();
}

[ch4dwick]

At the date of this writing I was able to fix this by enabling third-party cookies in Chrome & Safari and Shields Off for Brave. The checkLoginIframe:false checking false solution didn't fix it for me.

The issue doesn't affect MS Edge as of this writing.