Vue 3 对象属性 returns 未定义

Question

如何从 Keycloak 对象中提取其他属性？现在，

如果我用，

console.log(keycloak)

它将输出整个keycloak对象。即使我重新加载它也会留在控制台上。

但是当我使用的时候，

console.log(keycloak.token)

它将从 keycloak 对象输出令牌，但是当我重新加载页面时，它在控制台上显示未定义。

我的 Vue 组件：

<template>
  <div class="home">
    {{ arrowFunction() }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useKeycloak } from "@baloise/vue-keycloak";

export default defineComponent({
  name: "Home",

  setup() {
    const { keycloak } = useKeycloak();
    function arrowFunction() {
      console.log(keycloak);
      return keycloak;
    }
    return {
      arrowFunction,
    };
  },
});
</script>

我的Main.ts:

import { vueKeycloak } from "@baloise/vue-keycloak";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

const app = createApp(App);

app.use(vueKeycloak, {
  initOptions: {
    onLoad: "login-required", // default
  },
  config: {
    url: "https://xxxxxxxxxxxxxx.com/auth/",
    realm: "xxxxx",
    clientId: "xxxxclient",
  },
});
createApp(App).use(store).use(router).mount("#app");

信息存储在这里：

Answer 1

keycloak包的README显示useKeycloak()暴露了几个状态。其中一个好像是你一开始想要得到的（token）。

所以我建议您不要只获取密钥斗篷属性并尝试获取它的令牌，您可能希望直接获取您正在寻找的状态，因此，我会重写您的代码为

  setup() {
    const { keycloak, token } = useKeycloak();
    function arrowFunction() {
      console.log(keycloak);
      console.log(token);
      return keycloak;
    }
    return {
      arrowFunction,
    };
  },

我从未在图书馆工作过，所以当我遗漏了重要的东西时请告诉我，但我认为这应该可以如您所愿。

进一步说明：

如果我们看一下 useKeycloak(); 的文档，我们可以看到它将 return 一个具有各种属性的对象。其中我们有 keycloak 和 token。

我们通过在调用中解构它们来直接获取该对象的属性。

const { keycloak } = useKeycloak();

将与

相同

const ReturnValue = useKeycloak();
const keycloak = ReturnValue.keycloak;

所以我们可以通过将 return 值添加到大括号中来绑定属性值，从而导致：

const { keycloak, token } = useKeycloak();
// Same as:
// const ReturnValue = useKeycloak();
// const keycloak = ReturnValue.keycloak;
// const token = ReturnValue.token;

所以最初发生的事情是，您有效地记录了 console.log(useKeycloak().keycloak.token);

Vue 3 对象属性 returns 未定义

Vue 3 Object property returns undefined

javascript

typescript

vue.js

keycloak

vuejs3

Vue 3 对象 属性 returns 未定义

Vue 3 Object property returns undefined

javascript

typescript

vue.js

keycloak

vuejs3

Vue 3 对象属性 returns 未定义