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);