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

Question

我是 React 的新手，我想知道如何在使用 msal-react 库登录后自动调用我的 .NET Core 后端 API？

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

由于 MsalAuthenticationTemplate.

，我的应用在访问应用时自动打开 Microsoft 登录页面

但是有没有办法在登录后监听事件或其他东西立即调用我的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>

所以我想达到的目标是：

通过 MSAL 登录（完成）
调用我的后端 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

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

@azure/msal-react Call .NET Api immediately after Authentication

reactjs

.net

msal

msal.js

msal-react