使用 Vue 3 和 Typescript 在 Keycloak 项目中重新加载后没有输出

问题描述

我在我的项目中使用了这个插件 https://github.com/dsb-norge/vue-keycloak-js。 这个克隆的项目有 3 个示例，我使用的是 Typescript 示例。

我的 main.ts 看起来像这样。

import { createApp } from 'vue'
import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
import App from './App.vue'
import {KeycloakInstance} from "keycloak-js";
import {VueKeycloakInstance} from "@dsb-norge/vue-keycloak-js/dist/types";


createApp(App)
  .use(VueKeycloakJs,{
    init: {
     onLoad: 'login-required',},config: {
    url: 'https://auth-keycloak002.xxxxxxxx.de/auth/',clientId: 'xxxxxxx',realm: 'xxxxx'
  },onReady (keycloak: KeycloakInstance) {
    console.log('Keycloak ready',keycloak)
  }
})
.mount('#app')

declare module '@vue/runtime-core' {
interface ComponentCustomProperties  {
  $keycloak: VueKeycloakInstance
}
}

我的 Secret.vue 看起来像这样：

<template>
  <div>star
    <div v-if="$keycloak && $keycloak.ready">
      <div v-if="$keycloak.authenticated">
        <h2>You should only be able to see this if you are authenticated.</h2>
        <h3>This is what my token looks like:</h3>
        <code>{{ $keycloak.tokenParsed }}</code>
        <h3>This is your access token:</h3>
        <code>{{ $keycloak.token }}</code>
        <br />
        <button @click="$keycloak.logoutFn">logout</button>
        <button @click="$keycloak.keycloak.updatetoken(300)">Refresh token</button>
      </div>
      <div v-else>
        <h1>Not authenticated</h1>
        <button @click="$keycloak.login">Login</button>
      </div>
    </div>
    <div v-else>
      test
    </div>
  </div>
</template>
<script>

我可以在 keycloak 登录页面上登录，但之后它只在第一次加载输出。如果我重新加载页面，它只显示外部“星”部分，其他部分“测试”.. 它不再识别 $keycloak 对象..

我错过了什么吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）