quasar: Quasar - hashmode leads into wrong redirect by using vue-keycloak

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 project (typescript_vue3 - hello_keycloak in the same repo, based on vue only) it redirects correctly. I checked the router but i could not get the error source.

boot/keycloak.ts

import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
import axios, { AxiosRequestConfig } from 'axios';
import { boot } from 'quasar/wrappers';

export default boot(async ({ app}) => {
  function registerTokenInterceptor () {
    axios.interceptors.request.use((config: AxiosRequestConfig) => {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/restrict-template-expressions
      config.headers['Authorization'] = `Bearer ${app.config.globalProperties.$keycloak.token}`

      return config
    }, error => {
      return Promise.reject(error)
    }) //null, { synchronous: true })
  }

  return new Promise(resolve => {
    app.use(VueKeyCloak, {
      init: {
        onLoad: 'check-sso', // or 'login-required'
        flow: 'standard',
        pkceMethod: 'S256',
        silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
        checkLoginIframe: false
      },
      config: {
        url: 'https://my.keycloak.com/auth',
        realm: 'myrealm',
        clientId: 'myclientid',
      },
      onReady() {
        registerTokenInterceptor()
        resolve()
      }
    })
  })
})

public/slient-check-sso.html

<html>
<body>
<script>
  parent.postMessage(location.href, location.origin)
</script>
</body>
</html>

routes.ts

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [{ path: '', component: () => import('pages/Index.vue') }],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/Error404.vue'),
  },
];

export default routes;

To Reproduce Steps to reproduce the behavior:

Setup keycloak init in the boot file
execute function $keycloak.login() by using a button
Log-In and get redirected - 404 Quasar Error Page with URL: 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

Expected behavior Like in the example project i should get redirected to home and the parameters in the url should disappear http://192.168.178.44:8080/#/

Platform (please complete the following information): Quasar Version: 2.0.2 @quasar/app Version: 3.0.2

Quasar mode:

SPA
SSR
PWA
Electron
Cordova
Capacitor
BEX

Tested on:

SPA
SSR
PWA
Electron
Cordova
Capacitor
BEX

OS: Arch Linux Node: 16.4 NPM: 7.17 Yarn: 1.22.10 Browsers: Firefox iOS: - Android: - Electron: -

Additional context It seems to be a router problem which exist by using quasar cause the https://github.com/dsb-norge/vue-keycloak-js/tree/master/examples/ are working completly fine.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (6 by maintainers)

Most upvoted comments

After the upgrade, I have the same problem. History mode: correct Hash: incorrect

nucle on Aug 3, 2021