基于Cognito用户组，用React+AWS Amplify实现页面权限控制

你的代码核心问题在于未正确处理异步函数返回的Promise，且调用逻辑存在参数缺失：

• isTutor是async函数，直接用isTutor() == true判断永远不成立，因为async函数返回的是Promise对象而非布尔值。
• 调用isTutor()时未传入用户对象，导致函数内user为undefined，触发Cannot read properties of undefined (reading 'accessToken')错误。
• 异步获取用户信息的逻辑未与React状态管理结合，渲染时数据未就绪引发异常。

解决方案 #

使用React的useState和useEffect钩子管理异步状态，等待用户信息加载完成后再根据用户组渲染对应页面，同时处理加载状态和异常场景。

修正后的完整代码 #

import { withAuthenticator } from '@aws-amplify/ui-react';
import React, { useState, useEffect } from 'react';
import { Auth } from 'aws-amplify';

function TutorHome() {
  // 管理组件状态：是否为导师、加载状态、错误信息
  const [isTutor, setIsTutor] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 异步处理用户组判断逻辑
    const checkUserGroup = async () => {
      try {
        const user = await Auth.currentAuthenticatedUser();
        // 处理用户无所属组的场景，默认返回空数组
        const groups = user.signInUserSession.accessToken.payload["cognito:groups"] || [];
        // 更新状态：是否属于Tutors组
        setIsTutor(groups.includes('Tutors'));
      } catch (err) {
        setError(err);
        console.error("获取用户信息失败:", err);
      } finally {
        // 无论成功失败，结束加载状态
        setLoading(false);
      }
    };

    // 组件挂载时执行异步判断
    checkUserGroup();
  }, []); // 空依赖数组确保仅执行一次

  // 加载中状态渲染
  if (loading) {
    return <div>加载中...</div>;
  }

  // 错误状态渲染
  if (error) {
    return <div>获取用户信息出错，请重试</div>;
  }

  // 根据用户组判断结果渲染对应页面
  return isTutor ? <TutorHomeValid /> : <TutorHomeNotValid />;
}

export default withAuthenticator(TutorHome);

关键修改说明 #

• 状态管理：通过useState保存判断结果、加载状态和错误信息，确保组件能根据状态变化自动重新渲染。
• 异步逻辑处理：在useEffect中封装异步函数，用await等待Promise解析，避免在组件渲染阶段直接处理异步操作。
• 异常防护：添加try/catch捕获错误，同时处理用户无所属组的边界场景，避免TypeError。
• 加载状态：异步操作完成前显示加载提示，避免因数据未就绪导致的渲染异常。

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