如何在UI中管理AWS Cognito用户并修改custom:role属性？

我开发了一个需要登录注册的应用，用户字段包含name、emailid、password和role_type（默认值为visitor），角色分为Admin和visitor两类。之前用数据库存储用户数据，通过API修改角色；近期切换到AWS Cognito，用自定义属性custom:role存储角色信息。

现在需要实现两个功能：

• 在UI中展示所有用户
• 将用户的custom:role属性在visitor和Admin之间切换

已知Cognito默认不允许普通用户修改其他用户的属性，想了解实现思路和建议，以及是否需要开发专属API。

注册组件代码 #

import React, { useState } from 'react';
import { toast, Toaster } from 'react-hot-toast';
import { useNavigate, Link } from 'react-router-dom';
import UserPool from './UserPool';

const Signup = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [name, setName] = useState('');
  const navigate = useNavigate();

  const handleSignup = async (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      toast.error('Passwords do not match');
      return;
    }

    try {
      await new Promise((resolve, reject) => {
        UserPool.signUp(
          email,
          password,
          [
            { Name: 'name', Value: name },
            { Name: 'email', Value: email },
            { Name: 'custom:role', Value: 'admin' }
          ],
          null,
          (err, data) => {
            if (err) reject(err);
            else resolve(data);
          }
        );
      });

      toast.success('Signup successful. Please check your email for the confirmation code.', {
        duration: 3000,
        onClose: () => navigate('/confirm-email'),
      });
    } catch (err) {
      console.error(err);
      toast.error(err.message || 'An error occurred. Please try again.');
    }
  };

UserPool配置代码 #

import { CognitoUserPool } from "amazon-cognito-identity-js";
import { cognito_user_pool_id , cognito_client_id  } from "../utils/config";

const poolData = {
  UserPoolId: cognito_user_pool_id,
  ClientId: cognito_client_id,
};

export default new CognitoUserPool(poolData);

1. 展示所有用户 #

Cognito前端SDK没有直接获取全量用户的能力，必须通过后端服务调用Cognito Admin API实现：

• 后端使用AWS SDK（如@aws-sdk/client-cognito-identity-provider）调用ListUsers接口，传入用户池ID获取所有用户数据
• 后端提供专属接口给前端，前端调用该接口拿到数据后渲染展示

2. 切换用户角色（修改custom:role） #

因为Cognito禁止普通用户修改他人属性，必须通过后端Admin级接口完成：

• 后端IAM角色需要配置cognito-idp:AdminUpdateUserAttributes权限
• 前端将目标用户的用户名（或唯一标识如邮箱）和目标角色值传递给后端
• 后端调用AdminUpdateUserAttributes接口，修改目标用户的custom:role属性

3. 是否需要专属API？ #

必须开发专属后端API，原因：

• 前端无法直接调用Cognito Admin接口（会暴露敏感AWS凭证，且权限不允许）
• 后端可加入权限校验逻辑，确保只有Admin角色的用户才能调用这些接口

额外注意事项 #

• 注册代码当前默认把custom:role设为admin，需改成默认visitor，除非是单独的管理员注册通道
• 后端接口需增加权限验证：只有当前登录用户的custom:role为Admin时，才能调用用户列表和角色修改接口
• 前端展示用户时可做数据缓存，修改角色后及时刷新列表，提升体验

内容的提问来源于stack exchange，提问作者1DS20IS407__SHAIKH_ALAM