Amplify Vue amplify-authenticator 组件不显示答案

【问题标题】：Amplify Vue amplify-authenticator component not displayingAmplify Vue amplify-authenticator 组件不显示
【发布时间】：2019-07-31 02:47:03
【问题描述】：

我一直在通过HelloWorld.vue 组件在Web 应用程序的Home.vue 视图上使用<amplify-authenticator> 组件。这按预期工作，使用 store.js 和 Vuex 监控登录状态。

我现在已根据登录状态切换到路由到 Home.vue 或 Login.vue。

但是，当退出的用户正确路由到 Login.vue 时，页面会按预期显示，但会减去 <amplify-authenticator> 组件。从样式中可以清楚地看出这是在导入（amazonOrange 被列为一种颜色），但由于某种原因，登录界面不再正确显示。

Login.vue

<template>
  <div class="login">
    <div>
      <vue-headful title="Login"/>
    </div>
    <div>
    <p>
      <router-link to="/">Login</router-link> |
      <router-link to="/about">About</router-link>
      </p>
    </div>
    <div>
      <p><img alt="Vue logo" src="../assets/logo.png" /></p>
    </div>
    <div>
      <amplify-authenticator></amplify-authenticator>
    </div>
  </div>
</template>

<script>
import { Auth } from "aws-amplify";
import { AmplifyEventBus } from "aws-amplify-vue";
export default {
  name: "Login",
  props: {
    msg: String
  }
};
</script>

如果我将amplify-authenticator 更改为amplify-sign-in，那么我会看到一个登录界面，但这需要额外的脚本来实现。

我想具体了解为什么 Authenticator 组件没有显示，因为我在我的代码中看不到明显的错误。

【问题讨论】：

HelloWorld.vue 是否导入amplify-authenticator 组件并将其列在其components 属性中？如果没有，那么该组件是如何以及在哪里注册的？
我认为 main.js 中的这一行处理它：Vue.use(AmplifyPlugin, AmplifyModules, BootstrapVue); <amplify-sign-in> 正确显示，没有任何额外的导入，所以我认为这不是导入问题。当然，HelloWorld.vue 并没有导入任何不同的东西。我能看到的唯一区别是 HelloWorld.vue 是一个组件，而 Login.vue 是一个视图。我正在建立这个例子：youtube.com/watch?v=DFftniOvoLA
感谢您的验证。组件和views没有区别，只是一个语义文件夹名
哦等等，你不能将多个插件传递给Vue.use()。每个都必须独立，第二个参数是options，即Vue.use(AmplifyPlugin, AmplifyModules); Vue.use(BootstrapVue);
谢谢，这是我在尝试解决问题时更改的内容！不幸的是，这不是问题的原因。

标签： vue.js aws-amplify

【解决方案1】：

解决了。如果用户登录到 Amazon Cognito，则不会显示 <amplify-authenticator>。问题在于检查signedIn 状态时出现错误，将用户重定向到错误的页面。

【讨论】：