Vue3集成Keycloak出现tokenParsed未定义的TypeError问题求助

错误现象 #

登录后页面跳转至空白页，控制台抛出如下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'tokenParsed')
    at Proxy.getName (TheHeader.vue?ad06:85:1)
    at eval (TheHeader.vue?ad06:16:1)
    at renderFnWithContext (runtime-core.esm-bundler.js?d2dd:852:1)
    at normalizeChildren (runtime-core.esm-bundler.js?d2dd:7006:1)
    at createBaseVNode (runtime-core.esm-bundler.js?d2dd:6755:1)
    at _createVNode (runtime-core.esm-bundler.js?d2dd:6857:1)
    at createVNodeWithArgsTransform (runtime-core.esm-bundler.js?d2dd:6712:1)
    at eval (TheHeader.vue?ad06:13:1)
    at renderFnWithContext (runtime-core.esm-bundler.js?d2dd:852:1)
    at normalizeChildren (runtime-core.esm-bundler.js?d2dd:7006:1)

相关代码 #

TheHeader.vue 出错方法 #

methods: {
  logout () {
    app.$keycloak.logout({ redirectUri: window.location.origin })
  },
  getName(){
    const fristname = app.$keycloak.tokenParsed.first_name
  }
}

main.js Keycloak初始化代码 #

const app = createApp(App)
app.use(authPlugin)
app.use(VueLogger)

/**
 * @login-required: authentication of client if user is logged in, or displaying login page if not.
 */
app.$keycloak
  .init({ onLoad: 'login-required', checkLoginIframe: false })
  .then(() => {
    app.use(vuetify)
    app.use(router)
    app.use(store)
    console.log(app)
  }).catch(() => {
    console.log("failed to initialize keycloak.")
  })
app.mount('#app')

问题根源 #

1. 组件实例访问错误：直接导入main.js的app对象，在组件中拿到的是挂载后的DOM元素而非Vue应用实例，无法正确访问$keycloak。
2. 挂载时机不合理：app.mount('#app')同步执行，早于Keycloak异步初始化完成，导致组件渲染时$keycloak尚未准备好，tokenParsed不存在。
3. 无空值保护：未对tokenParsed做存在性判断，即使初始化正常，也可能因token解析失败触发报错。

解决思路 #

1. 修正组件中$keycloak的访问方式 #

Vue3选项式API组件可通过this直接访问全局注入的$keycloak，无需导入外部app对象，同时增加空值保护：

methods: {
  logout () {
    this.$keycloak.logout({ redirectUri: window.location.origin })
  },
  getName(){
    // 用可选链避免tokenParsed为空时报错，添加默认值兜底
    const firstname = this.$keycloak.tokenParsed?.first_name || '访客'
    return firstname
  }
}

2. 调整应用挂载时机 #

将app.mount('#app')移入Keycloak初始化成功的回调中，确保所有依赖初始化完成后再渲染组件：

const app = createApp(App)
app.use(authPlugin)
app.use(VueLogger)

app.$keycloak
  .init({ onLoad: 'login-required', checkLoginIframe: false })
  .then(() => {
    app.use(vuetify)
    app.use(router)
    app.use(store)
    app.mount('#app') // 延迟挂载，确保Keycloak初始化完成
    console.log(app)
  }).catch(() => {
    console.log("failed to initialize keycloak.")
  })
// 移除原有的同步mount调用

3. 增加初始化状态守卫（可选） #

可在Vuex/Pinia中维护Keycloak初始化状态，在路由或组件内添加守卫逻辑，确保未完成初始化时不渲染需要认证的组件，避免提前触发错误。

内容的提问来源于stack exchange，提问作者Alan_P