如何限制 React 前端和 C# 后端应用程序中的 api 访问？

Question

我有一个使用 MSAL 对用户进行身份验证的应用程序，该应用程序位于客户端，请做出反应。 但在后端，c# 我进行 api 调用，我想添加一些授权以仅允许已成功登录应用程序的用户。

我该怎么做，有例子吗？

Answer 1

如果您使用的是 Azure MSAL，您将获得来自 azure AD 的

token

。您可以在请求标头中发送

AuthToken

，该标头可以在后端的 API 服务中进行解码和验证。

这是 axios get 和 post 方法的示例，使用

Auth Token

..

import axios from 'axios';

// in getToken method., write logic to get Auth token using `useMsal` method.
const token = getToken();

axios.get(`/api/your_url`, {
  headers: {
    'Authorization': `Bearer ${token}`
  },
})
.then((response) => console.log(response))
.catch((response) => console.log(error));

您可以借助

useMsal

插件中提供的

msal-react

方法来获取令牌。