vue-keycloak-js
vue-keycloak-js copied to clipboard
Infinite redirection loop with vue-router default mode "hash"
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!
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.
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.
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!
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:
- login (I'm now at /#/dashboard)
- navigate to /#/admin
- wait for my access token to expire and fetch a new one
- 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.
Is anybody actively working on a fix/work around for this issue?
No, but any help would be greatly appreciated!
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();
}
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.