如何使用 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