Gridsome + AWS Amplify - 导入事件总线中断注销按钮组件答案

【问题标题】：Gridsome + AWS Amplify - Importing Event Bus breaks Logout Button ComponentGridsome + AWS Amplify - 导入事件总线中断注销按钮组件
【发布时间】：2020-09-06 01:32:18
【问题描述】：

我已成功将 AWS Amplify 的 Auth UI 功能和组件与 Gridsome 集成以实现简单的登录/注销功能，但是当我尝试使用 Amplify Event Bus 访问时

import { AmplifyEventBus } from "aws-amplify-vue"

我得到错误：

Error in mounted hook (Promise/async): "TypeError: Cannot read property 'Logger' of undefined"

我发现了一个类似的问题on the github post 并添加了建议

Vue.prototype.$Amplify = Amplify;

确实删除了警告，但 Auth UI Logout 组件将不再显示。我可以登录，但没有显示注销按钮。我不明白为什么当 UI 组件已经在没有它的情况下工作时访问事件总线需要我将 Amplify 添加到 Vue 原型中，以及为什么即使我添加了它，组件仍然没有出现。

【问题讨论】：

标签： amazon-web-services vue.js authentication aws-amplify gridsome

【解决方案1】：

AmplifyEventBus 已停用，因此现在考虑为Legacy

改为使用Hub.listen，如下所示：

<script>
import { Hub } from 'aws-amplify'

export default {
  mounted() {
    Hub.listen('auth', (info) => {
      console.log('auth event:', info)
    })
  },
}
</script>

同样可以导入Logger，比如：

import { Hub, Logger } from 'aws-amplify'

【讨论】：