如何使用 React 顯示使用 Cognito 進行身份驗證的用戶組？

Question

我有一個在 amplify 上運行的應用程序，它使用 Cognito 進行了身份驗證。 我正在嘗試顯示用戶的組（渲染）。 我有以下代碼來獲取用戶的信息。

export const getCurrentUser = async () => {
  try {
    const userInfo = await Auth.currentAuthenticatedUser({bypassCache:true})
    console.log("User info: ",userInfo)

    if(userInfo){

      return userInfo.signInUserSession.idToken.payload["cognito:groups"];
        }
      }

  catch (err) {
    console.log('error: ', err)
  }
}

然后是應用程序 function

function App() {

  
  return (

    <Authenticator formFields={formFields} components={components}>
      
      {({ signOut, user }) => (

        <div className="App">
          <p>
                                                             --> This does not work
            Hey {user.username}, Welcome to NUBER. You are a {getCurrentUser()[0]}
          </p>
          <button onClick={signOut}>Sign out</button>
        </div>
      )}
    </Authenticator>
  );
}

export default App;

如何將用戶組呈現到屏幕上？

Answer 1

您的 getCurrentUser function 是異步/等待 promise 因此您需要異步處理 output。

這是一個例子：

function App() {
  const [groups, setGroups] = useState([]);

  useEffect(() => {
    const getGroups = async () => {
      const groups = await getCurrentUser();
      setGroups(groups);
    }

    // make sure to catch any error
    getGroups().catch(console.error);
  });

  
  return (

    <Authenticator formFields={formFields} components={components}>
      
      {({ signOut, user }) => (

        <div className="App">
          <p>
            Hey {user.username}, Welcome to NUBER. You are a {groups[0]}
          </p>
          <button onClick={signOut}>Sign out</button>
        </div>
      )}
    </Authenticator>
  );
}

export default App;

請記住，您需要以不同的方式處理使用效果中的異步操作。 這是一篇關於它的帖子，但網上還有很多其他的。

https://devtrium.com/posts/async-functions-useeffect