重新加載后Vue 3對象返回未定義

Question

如何從 Keycloak 對象中提取其他屬性？ 馬上，

如果我使用，

console.log(keycloak)

它將輸出整個 keycloak 對象。 即使我重新加載它也會留在控制台上。

但是當我使用時，

console.log(keycloak.token)

它將從 keycloak 對象輸出令牌，但是當我重新加載頁面時，它在控制台上給我 undefined 。

我的 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>

我的主要.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 包的自述文件顯示useKeycloak()公開了一些狀態。 其中一個似乎是您首先想要獲得的（令牌）。

因此，我建議您不要只獲取 keycloak 屬性並嘗試獲取它的令牌，而是希望直接獲取您正在尋找的狀態，因此，我會將您的代碼重寫為

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

我從來沒有在圖書館工作過，所以當我錯過了一件重要的事情時告訴我，但我認為這應該可以如你所願。

---

進一步闡述：

如果我們看一下useKeycloak();的文檔useKeycloak(); 我們可以看到它將返回一個具有各種屬性的對象。 其中我們有keycloak和token。

我們通過在調用時解構它們來直接獲取該對象的屬性。

const { keycloak } = useKeycloak();

將與

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

因此，我們可以通過將返回值添加到大括號中來綁定返回值的所需公開屬性，從而導致：

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

所以最初發生的事情是，你有效地記錄了console.log(useKeycloak().keycloak.token);