-
Notifications
You must be signed in to change notification settings - Fork 99
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Wrong redirect by using vue-kecloak with quasar #94
Comments
I don't have any good explanation. To me it does seem like keycloak and this plugin is doing what is expected. Also your "catch all" route can just be |
Thank you for help. Commenting out unfortunately did not make a difference. I also believe that keycloakjs does not cause the error. I'll check the Quasar repository. |
@Excel1 could u solve it? Sorry i had no time. But i could take a look today. |
@nucle No problem :) |
@nucle I think i found the problem. Its the routermode: quasar.conf.js
By using "hash" i will get redirected wrong: By using "history" i will get redirected correctly: But this only happens by using quasar. By using the vue-typescript example in router hashmode it works correctly. And also without parameters in url. |
@Excel1 great! BR |
@baltom Maybe this Question should be opened again, cause we found out that this is a problem by keycloak-js: |
Indeed, i didn't catch that this was/is a hash issue in vue-router. In which case it's a duplicate of our first registered issue #1 im guessing you are hitting the same issue |
What's going on now? Have you solved it? |
@muei No, currently im using history-mode as workaround. |
I'm going through the same problem but only on the application's internal routes. In the root route "/" history mode works but any other route (eg http://localhost:8080/#/route1) the state query is added and breaks the application (eg http://localhost:8080/# /route1&state=12...) I tried 'hash' and 'history' modes and neither worked. I'm using vue-router 4.0.0 and vue-keycloak-js 2.1.3-beta. The code from the 'boot/keycloak.js' file:
|
Hi, trying resolving the same issue I come to the following solution in my router config code:
|
@arcadeJHS Thank you for the solution, it saved me. This problem has been bothering me for a long time. I tried to modify your solution to meet my needs.
|
This solution looks more like a work around them a solution, maybe this problem is related with the keycloak himself: keycloak/keycloak#8959 |
Excellet I have a whole day to fix this problem, your solution help me a lot |
This issue has indeed to do with Vue Router conflicting with Keycloak (see keycloak keycloak/keycloak#14742). Based on this comment we used to following solution: router/index.ts const initializeRouter = () => {
const router = createRouter({
// Options
})
router.beforeEach(() => {...})
router.afterEach(() => {...})
return router
}
export default initializeRouter main.ts import initializeRouter from '@/router'
const app = createApp(App)
// Other app.use statements
app.use(...)
app.use(VueKeyCloak, {
config: {
// config
},
init: {
// init options
},
onReady: () => {
app.use(initializeRouter())
app.mount('#app')
},
})
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$keycloak: VueKeycloakInstance
}
}
export default app This will correctly remove the Keycloak hashes from the URL. |
@NoudH Thanks, Your solution : #94 (comment) worked great. |
This: https://github.com/gnieser/vue-keycloak/blob/master/src/router/index.js resolve this problem, only change router index file, for me work perfectly |
A simpler solution : when you init your vue-keycloak instance, add "responseMode: 'query'" export default boot(async ({ app, router, store }) => {
app.use(VueKeyCloak, {
init: {
onLoad: 'check-sso',
useNonce: false,
checkLoginIframe: false,
silentCheckSsoFallback: false,
silentCheckSsoRedirectUri:
window.location.origin + '/silent-check-sso.html',
responseMode: 'query',
}, |
Finally i got it working with quasar. But i got at least one problem:
If i logged in i will be redirected to the following url which leads to the 404 quasar error page instead to http://192.168.178.44:8080/.
http://192.168.178.44:8080/#/&state=671a7344-b7a0-4779-8fde-da8c99c6aa4a&session_state=a5598f7f-c11c-41f3-a777-883ac33f6ca1&code=c88b4a26-4bc4-4aca-93b5-5305b490ac37.a5698g7f-c11c-41f3-a777-883ac93f6ca1.3cb8d30d-4783-425a-bf33-3d79613bed10
In the example vue3-keycloak it redirects correctly. I checked the router but i could not get the error source.
boot/keycloak.ts
public/slient-check-sso.html
routes.ts
The text was updated successfully, but these errors were encountered: