AWS Amplify+React应用用户角色授权方案选型及实施步骤咨询

方案对比 #

1. 自定义属性（userType） #

• 优势：实现简单，用户角色与账号直接绑定，查询和修改便捷，适合小型项目、角色类型少的场景；注册阶段可直接让用户选择或后续由管理员手动修改。
• 劣势：权限控制需完全在业务代码中实现，无法直接集成Cognito原生的IAM权限关联；角色数量增多后，代码判断逻辑会变得繁琐，难以批量管理用户权限。

2. Cognito用户组 #

• 优势：Cognito原生支持，可直接绑定IAM角色实现精细化权限控制；Amplify能自动识别用户组信息，便于在API、存储等资源上配置基于组的授权规则；适合中大型项目，支持批量管理用户权限，扩展性强。
• 劣势：需要手动创建组并分配用户，注册阶段无法自动分配组（需借助Lambda触发器实现自动化），初期配置略复杂。

结论：如果是3个以内角色的小型项目，自定义属性足够高效；若需长期维护、精细化权限控制或角色数量可能扩展，优先选择用户组方案。

方案一：添加userType自定义属性实施步骤 #

1. 在Cognito控制台配置自定义属性

   • 登录AWS控制台，进入目标Cognito用户池，切换到「属性」标签页
   • 点击「添加自定义属性」，输入属性名userType，类型选择「字符串」，设置合适长度（如20），勾选「可在注册时写入」（若允许用户注册时选择角色）

2. React项目中集成注册字段
   使用Amplify UI组件扩展注册表单，添加角色选择字段：

   import { Authenticator } from '@aws-amplify/ui-react';
   import '@aws-amplify/ui-react/styles.css';
   
   function App() {
     return (
       <Authenticator>
         {({ signOut, user }) => (
           <div>
             <h1>Hello {user.username}</h1>
             <button onClick={signOut}>Sign out</button>
           </div>
         )}
         <Authenticator.SignUp>
           {(props) => (
             <Authenticator.SignUp.Form
               {...props}
               formFields={[
                 ...props.formFields,
                 {
                   type: 'select',
                   label: '用户角色',
                   name: 'userType',
                   options: [
                     { label: '普通用户', value: 'user' },
                     { label: '管理员', value: 'admin' },
                     { label: '超级管理员', value: 'super_admin' },
                   ],
                   required: true,
                 },
               ]}
             />
           )}
         </Authenticator.SignUp>
       </Authenticator>
     );
   }
   

3. 业务代码中判断角色权限
   登录后获取用户自定义属性，根据userType值控制页面或功能访问：

   import { Auth } from 'aws-amplify';
   
   const checkUserRole = async () => {
     try {
       const userInfo = await Auth.currentUserInfo();
       const userType = userInfo.attributes.userType;
       
       if (userType === 'super_admin') {
         // 渲染超级管理员专属功能
         console.log('超级管理员权限');
       } else if (userType === 'admin') {
         // 渲染管理员功能
         console.log('管理员权限');
       } else {
         // 普通用户功能
         console.log('普通用户权限');
       }
     } catch (err) {
       console.error('获取用户信息失败', err);
     }
   };
   

4. 修改用户角色
   管理员可直接在Cognito控制台的用户详情页编辑userType属性，或通过Amplify Admin UI进行批量修改。

方案二：Cognito用户组实施步骤 #

1. 创建用户组

   • 进入Cognito用户池，切换到「组」标签页
   • 依次创建super_admin、admin、user三个组，每个组可关联对应的IAM角色（例如超级管理员组关联具备全资源访问权限的IAM角色，普通用户组关联只读权限角色）

2. 分配用户到组

   • 手动分配：在用户池「用户」列表中选择目标用户，点击「添加到组」，选择对应组完成分配
   • 自动分配（可选）：创建Cognito Post Confirmation Lambda触发器，在用户注册确认后自动将用户添加到指定组，示例代码：

     exports.handler = async (event) => {
       const cognitoidentityserviceprovider = require('aws-sdk').CognitoIdentityServiceProvider();
       const params = {
         GroupName: 'user', // 默认添加到普通用户组
         UserPoolId: event.userPoolId,
         Username: event.userName
       };
       try {
         await cognitoidentityserviceprovider.adminAddUserToGroup(params).promise();
       } catch (err) {
         console.error('添加用户到组失败', err);
       }
       return event;
     };
     

3. React项目中获取用户组信息
   登录后从用户会话中提取组信息，判断权限：

   import { Auth } from 'aws-amplify';
   
   const getUserGroups = async () => {
     try {
       const user = await Auth.currentAuthenticatedUser();
       const groups = user.signInUserSession.accessToken.payload['cognito:groups'] || [];
       
       if (groups.includes('super_admin')) {
         console.log('超级管理员权限');
       } else if (groups.includes('admin')) {
         console.log('管理员权限');
       } else {
         console.log('普通用户权限');
       }
     } catch (err) {
       console.error('获取用户组失败', err);
     }
   };
   

4. 基于组配置资源授权
   若使用Amplify GraphQL API，可在schema中配置基于组的授权规则：

   type Post @model @auth(rules: [
     { allow: groups, groups: ["super_admin"], operations: [create, update, delete, read] },
     { allow: groups, groups: ["admin"], operations: [create, update, read] },
     { allow: groups, groups: ["user"], operations: [read] }
   ]) {
     id: ID!
     title: String!
     content: String!
   }
   

5. 批量管理权限
   后续可通过修改组关联的IAM角色，批量更新组内所有用户的资源访问权限，无需逐个修改用户账号。

内容的提问来源于stack exchange，提问作者Usama Ahmed