reactjs - @azure/msal-react 在身份验证后立即调用 .NET Api

Question

我对 React 完全陌生，我想知道如何在使用库登录后自动调用我的 .NET Core 后端 API msal-react？

对于登录，我遵循了 Microsoft 上的教程（https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react）并且我使用的是@azure/msal-react 包.

由于MsalAuthenticationTemplate.

但是有没有办法在登录后监听事件或其他东西来立即调用我的 API？

<MsalAuthenticationTemplate interactionType={InteractionType.Redirect}></MsalAuthenticationTemplate>
<AuthenticatedTemplate>
                <div className="App">
                    <header className="App-header">
                        <img src={logo} className="App-logo" alt="logo"/>
                        <p>
                            <ProfileContent></ProfileContent>
                            <SignOutButton></SignOutButton>
                        </p>
                    </header>
                </div>
            </AuthenticatedTemplate>

所以我想要达到的目标：

1. 通过 MSAL 登录（完成）
2. 调用我的后端 API 以检索用户权限：在哪里以及如何？

Answer 1

您必须在登录后使用 useEffect 自动调用您的 API。

const [userData, setUserData] = useState([]);

 useEffect(() => {

   axios

     .get("your_api_url/user/")

     .then(({ data }) => {

       setUserData(data);

     })

     .catch((err) => console.log(err));

 }, []);

除了您上面提到的教程之外，请在此处阅读更多内容。

https://github.com/Azure-Samples/ms-identity-javascript-react-spa