key斗篷js将会话数据附加到vue3中的url

Question

keycloak-js在刷新vue3应用程序时似乎正在附加会话数据：https://my.domain/#/&state={state}&session={session}等

我不会对此有任何问题，除非当我刷新时，由于url格式不正确，它会破坏我的网站。

我找不到它试图将数据附加到url中的位置。

Answer 1

在vue路由器中，keycloak-js似乎与createWebHashHistory冲突。我已经更新为只使用createWebHistory，现在我的网站正在工作。

keycloak-js中有一个逻辑试图确定您是否在查询字符串中，我通过在parseCallbackUrl中遍历该代码发现了问题。

示例：如上所述，我最终使用了createWebHistory而不是createWebHashHistory。我在传递历史选项的createRouter方法中对router/index.js文件进行了更改：

import { createRouter, createWebHistory } from 'vue-router'
/* Other router code here */
const router = createRouter({
history: createWebHistory(), // was createWebHashHistory() with matching import substitution
routes
})
export default router

Answer 2

这里有一个在路由器配置中进行配置的变通方法。此线程的学分。

const removeKeycloakStateQuery = (to, from) => {
const cleanPath = to.path
.replace(/[&?]code=[^&$]*/, "")
.replace(/[&?]state=[^&$]*/, "")
.replace(/[&?]session_state=[^&$]*/, "");
return { path: cleanPath, query: {}, hash: to.hash };
};
// ...
{
path: "/:catchAll(.*)*",
component: () => import("src/pages/component.vue"),
beforeEnter: [removeKeycloakStateQuery],
}