如何禁用 aws amplify vue 身份验证器的注册链接？

Posted 2023-02-16

【中文标题】如何禁用 aws amplify vue 身份验证器的注册链接？

【英文标题】：How do I disable the sign up link for the aws amplify vue authenticator?

【发布时间】：2020-05-19 14:33:24

【问题描述】：

我正在使用aws-amplify-vue 库中的amplify-authenticator 组件为我的应用启用身份验证。我试图弄清楚如何禁用前端的“创建帐户”链接，但我似乎无法在文档或在线找到任何内容。我见过一些用户通过使用 css 隐藏它来禁用它的地方，以及一些用户能够使用 react 库禁用它的地方，但我没有找到任何特定于 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>

【参考方案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>

【讨论】：

我在我的代码中尝试了这种方法（请参阅更新的答案），但我没有成功。有什么额外的想法吗？ （附：欢迎来到 SO！）

感谢您的欢迎！当它作为函数而不是属性传入时，它似乎不喜欢它。您可以尝试将其更改为： authConfiguration() return signInConfig: isSignUpDisplayed: false ; 只是一个本地属性？ authConfiguration: any = signInConfig: isSignUpDisplayed: false ;

如何在 React 中做到这一点？

【参考方案2】：

我得到了一个简化的内联表达式：

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

【参考方案3】：

使用 @aws-amplify/auth ^3.2.6 和 @aws-amplify/ui-vue ^0.2.20 可以按照 Sign In docs 中的说明工作

<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>

【参考方案4】：

我试过了，在 Angular 8 中它可以工作。

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