Question

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

我现在已根据登录状态切换到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状态检查中的错误，该错误将用户重定向到错误的页面。

Amplify Vue放大身份验证器组件未显示

1 个答案: