Vue中基于Amazon Cognito获取并展示当前用户信息的问题

你的核心问题大概率是Amazon Cognito返回的UserAttributes是数组结构（而非直接的键值对对象），加上模板与脚本的变量不匹配，导致数据无法正常展示。以下是具体修复步骤：

1. 修正用户属性解析逻辑 #

Cognito的用户属性通常是类似这样的数组格式：

[
  { Name: "given_name", Value: "张三" },
  { Name: "family_name", Value: "李四" },
  { Name: "email", Value: "zhangsan@example.com" },
  { Name: "custom:company", Value: "XX科技" }
]

需要把这个数组转换成键值对对象，方便后续取值。在组件内添加转换函数：

// 转换UserAttributes数组为键值对对象
const transformUserAttributes = (attributes: any[]) => {
  return attributes.reduce((acc, curr) => {
    acc[curr.Name] = curr.Value;
    return acc;
  }, {} as Record<string, string>);
};

2. 更新组件脚本逻辑 #

修改setup里的代码，获取并转换完整的用户属性，同时定义对应响应式变量：

<script lang="ts">
export default defineComponent({
  name: "settings-menu",
  components: {
    PageHeader,
  },
  setup() {
    const router = useRouter();
    const i18n = useI18n();
    const store = useStore();
    // 定义存储用户属性的响应式对象
    const userAttributes = ref<Record<string, string>>({});

    // 转换用户属性的工具函数
    const transformUserAttributes = (attributes: any[]) => {
      return attributes.reduce((acc, curr) => {
        acc[curr.Name] = curr.Value;
        return acc;
      }, {} as Record<string, string>);
    };

    // 封装加载用户信息的逻辑
    const loadUserInfo = () => {
      const user = UserService.getUserInfo();
      // 假设user中包含UserAttributes数组，若直接返回数组则改为user即可
      if (user?.UserAttributes) {
        userAttributes.value = transformUserAttributes(user.UserAttributes);
      }
    };

    onMounted(() => {
      loadUserInfo();
    });

    const currentUser = computed(() => {
      return store.getters.currentUser;
    });

    watch(currentUser, () => {
      loadUserInfo();
    });

    return {
      userAttributes,
    };
  },
});
</script>

3. 修改模板绑定 #

把模板内容改成绑定转换后的userAttributes对象属性：

<template>
  <div>
    <PageHeader />
  </div>
  <!--begin::Row-->
  <div class="row g-5">
    <div class="col-lg-9">
      <div class="card card-flush card-stretch shadow">
        <div class="card-body mt-15">
          <h3 class="card-title py-2">
            {{ $t("settingsInfo.name") }} :
            <input v-model="userAttributes.given_name" type="text" />
          </h3>
          <h3 class="card-title py-2">{{ $t("settingsInfo.surname") }} : {{ userAttributes.family_name }}</h3>
          <h3 class="card-title py-2">{{ $t("settingsInfo.company") }} : {{ userAttributes["custom:company"] }}</h3>
          <h3 class="card-title py-2">{{ $t("settingsInfo.email") }} : {{ userAttributes.email }}</h3>
        </div>
        <div class="card-footer"></div>
      </div>
    </div>
  <!--end::Row-->
</template>

关键注意事项 #

• 如果UserService.getUserInfo()直接返回UserAttributes数组，将user.UserAttributes改为user即可。
• Cognito自定义属性（如公司）通常以custom:开头，要对应正确的键名。
• 可在浏览器控制台用localStorage.getItem('对应存储键名')检查本地存储的数据结构，确认UserAttributes是否存在。

内容的提问来源于stack exchange，提问作者Sponge Coder