放大 Vue 放大验证器组件不显示

Question

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

监视 signedIn 状态

我现在已切换到路由到 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 组件没有显示，因为我在我的代码中看不到明显的错误。

Answer 1

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

放大 Vue 放大验证器组件不显示

Amplify Vue amplify-authenticator component not displaying

vue.js

aws-amplify