React 和 AWS Amplify - 根据 Cognito 用户所属的组显示不同的页面

Question

我正在尝试创建一个具有多种不同类型用户（导师、学生和管理员）的 React 应用程序。 我想为每个人创建一个单独的主页（例如 mydomain/tutors、mydomain/students 等）。 我只希望正确的成员能够查看这些页面的实际内容。

我正在使用 AWS Amplify 进行应用程序和用户身份验证。 用户已经是用户池组的一部分。 我可以从 AWS 数据库中获取用户详细信息，但是这会返回 Promise object，这似乎破坏了 React 渲染。 我想我需要停止尝试呈现的页面，直到 Promise object 完成。

我试过使用状态，但我无法让它工作（我可能没有正确地实现它们）。

我愿意接受任何解决方案。

我当前的应用程序试图检查用户是否是导师以显示正确的页面

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

//Function to return the currently signed in user
async function getUser() {
    const user = await Auth.currentAuthenticatedUser();
    return user;
}

//Function to determine whether the user is a tutor or not
async function isTutor(user) {
    console.log("User given to isTutor function: " + user);
    //Get a list of groups the user is a member of
    const groups = user.signInUserSession.accessToken.payload["cognito:groups"];
    //Return true if the user is a member of the 'Tutors' Group
    const isATutor = groups.includes('Tutors');
    console.log("User is a tutor: " + isATutor);
    return isATutor;
}

//Function that returns the correct page based on whether the user is a tutor or not
function TutorHome() {
    if (isTutor() == true) {
        console.log("Is a tutor")
        return (
            <TutorHomeValid />
        );
      }
    else {
        console.log("Isn't a tutor")
        return (
            <TutorHomeNotValid />
        );
    }
}

//Export back up to index.js where it is rendered
//Enforce user login using 'withAuthenticator'
export default withAuthenticator(TutorHome);

问题是 getUser function 返回一个 Promise ，当它试图检查用户是否是导师时，它没有得到满足。

控制台日志：

User given to isTutor function: [object Promise]
TutorHome.jsx:80 Uncaught TypeError: Cannot read properties of undefined (reading 'accessToken')

Answer 1

您可以创建一个 class 和 componentDidMount() 来解决这个问题，这样您就可以在渲染 object 时检查该组

import { withAuthenticator } from '@aws-amplify/ui-react';
import React from 'react';
import { Auth } from 'aws-amplify';
class TutorHome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      group:''
    };
  }
  async componentDidMount() {
  const user =  await Auth.currentAuthenticatedUser();
  const groupname = user.signInUserSession.accessToken.payload["cognito:groups"][0]
  this.setState({ group:groupname });

  }
  render(){
    const { group }= this.state
  if (group === "Tutors")
     return (
         <TutorHomeValid />
     )
  else
     return (
         <TutorHomeNotValid />
     )
  export default withAuthenticator(TutorHome);