放大Vue放大-认证组件不显示

Question

我一直通过<amplify-authenticator>组件在web应用程序的Home.vue视图上使用HelloWorld.vue组件。这与预期的一样，signedIn状态使用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，则会在接口中看到一个标记，但这需要额外的脚本来实现。

我特别想知道为什么身份验证组件没有显示，因为我在代码中看不到明显的错误。

Answer 1

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