Как отключить ссылку для подписки на аутентификатор aws ampify vue?

Question

Я использую amplify-authenticator компонент из aws-amplify-vueбиблиотека, чтобы включить аутентификацию для моего приложения. Я пытаюсь понять, как отключить ссылку "Создать учетную запись" в интерфейсе пользователя, и мне кажется, что я ничего не могу найти в документации или в Интернете. Я видел несколько мест, где пользователи отключили его, скрыв с помощью css, и несколько мест, где пользователи могли отключить его с помощью библиотеки реакции, но я не нашел ничего особенного для библиотеки vue. Возможно, мне просто не хватает документации, но знает ли кто-нибудь, как удалить функцию регистрации из аутентификатора vue Amplify?

Составная часть

<template>
  <v-container>
    <amplify-authenticator></amplify-authenticator>
  </v-container>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Auth } from "aws-amplify";
import logger from "../logging";
import { components } from "aws-amplify-vue";
import { AmplifyEventBus } from "aws-amplify-vue";

@Component({
  components: {
    ...components
  }
})
export default class Login extends Vue {
  async created() {
    try {
      // This function throws an error if no user is logged in
      await Auth.currentAuthenticatedUser({ bypassCache: true });
      this.$router.push("/instruments");
    } catch (e) {
      logger.silly("No user currently logged in");

      AmplifyEventBus.$on("authState", async info => {
        logger.silly("signedIn");
        logger.silly(info);
        if (info === "signedIn") {
          const user = await Auth.currentAuthenticatedUser({
            bypassCache: true
          });
          this.$router.push("/instruments");
        } else {
          logger.error(`Failed to login`);
          alert("Failed to login");
        }
      });
    }
  }
}
</script>

<style scoped></style>

Обновление 1

Основываясь на ответе @asimpledevice, я безуспешно пробовал следующее:

<template>
  <v-container class="d-flex justify-center align-center">
    <amplify-authenticator
      :authConfig="authConfiguration"
    ></amplify-authenticator>
  </v-container>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Auth } from "aws-amplify";
import StoreTypes from "../store-types";
import logger from "../logging";
import { components } from "aws-amplify-vue";
import { AmplifyEventBus } from "aws-amplify-vue";

@Component({
  components: {
    ...components
  }
})
export default class Login extends Vue {
  async mounted() {
    try {
      // This function throws an error if no user is logged in
      await Auth.currentAuthenticatedUser({ bypassCache: true });
      this.$router.push("/instruments");
    } catch (e) {
      const self = this;
      AmplifyEventBus.$on("authState", async info => {
        if (info === "signedIn") {
          this.$store.dispatch(StoreTypes.types.LOAD_CURRENT_USER);
          const nextLocation =
            self.$route.query.redirect !== null &&
            self.$route.query.redirect !== undefined
              ? (self.$route.query.redirect as string)
              : "/instruments";
          this.$router.push(nextLocation).catch(err => {});
        }
      });
    }
  }

  authConfiguration() {
    return {
      signInConfig: {
        isSignUpDisplayed: false
      }
    };
  }
}
</script>

Answer 1

Вы можете скрыть раздел "зарегистрироваться" с помощью объекта "signInConfig".

  configurationOptions: any = {
    signInConfig: {
      isSignUpDisplayed: false
    }
  };

Затем вы можете передать этот объект как опору компоненту:

    <amplify-authenticator
      :authConfig="configurationOptions"
    ></amplify-authenticator>

ПРИМЕЧАНИЕ. Вы должны сделать объект конфигурации локальным свойством. Конфигурация не будет работать, если это функция или вычисляемое свойство. Ваше полное решение будет следующим:

<template>
  <v-container class="d-flex justify-center align-center">
    <amplify-authenticator
      :authConfig="configurationOptions"
    ></amplify-authenticator>
  </v-container>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Auth } from "aws-amplify";
import StoreTypes from "../store-types";
import logger from "../logging";
import { components } from "aws-amplify-vue";
import { AmplifyEventBus } from "aws-amplify-vue";

@Component({
  components: {
    ...components
  }
})
export default class Login extends Vue {
  configurationOptions: any = {
    signInConfig: {
      isSignUpDisplayed: false
    }
  };

  async mounted() {
    try {
      // This function throws an error if no user is logged in
      await Auth.currentAuthenticatedUser({ bypassCache: true });
      this.$router.push("/instruments");
    } catch (e) {
      const self = this;
      AmplifyEventBus.$on("authState", async info => {
        if (info === "signedIn") {
          this.$store.dispatch(StoreTypes.types.LOAD_CURRENT_USER);
          const nextLocation =
            self.$route.query.redirect !== null &&
            self.$route.query.redirect !== undefined
              ? (self.$route.query.redirect as string)
              : "/instruments";
          this.$router.push(nextLocation).catch(err => {});
        }
      });
    }
  }
}
</script>

<style></style>

Answer 2

С участием @aws-amplify/auth ^3.2.6 и @aws-amplify/ui-vue ^0.2.20это работает, как описано в документации для входа

<template>
  <div>
    <amplify-authenticator username-alias="email">
      <amplify-sign-in slot="sign-in" :hide-sign-up="true"
        username-alias="email">
      </amplify-sign-in>
    </amplify-authenticator>
  </div>
</template>

Answer 3

Если вы используете withAuthenticator:

      const withAuthenticatorOptions = {
  hideSignUp: true
}

export default withAuthenticator(MyApp, withAuthenticatorOptions);

документ AWS

Answer 4

Я получил это для работы с упрощенным встроенным выражением:

<amplify-authenticator :authConfig="{ signInConfig: { isSignUpDisplayed: false } }" />

Answer 5

Если использоватьAmplify UI for Vue, тогда это так же просто, как привязка:hide-sign-up="true"в аутентификаторе:

      <template>
  <authenticator :hide-sign-up="true">
    <template v-slot="{ user, signOut }">
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>

Answer 6

Я пробовал это, в Angular 8 это работает.

      <amplify-authenticator>
  <amplify-sign-in slot="sign-in" hide-sign-up="true"></amplify-sign-in>
</amplify-authenticator>