React应用程序中的身份验证和授权

Question

在.NET应用程序中，我可以使用web.config和/或IIS添加身份验证和授权。我也可以在MVC应用的控制器或操作中使用[Authorize (Roles = "RoleABC")]。甚至扩展AuthorizationAttribute

我正在考虑创建一个供Intranet使用的React应用，并阅读这些教程（ReactJS和MS），但找不到身份验证/授权详细信息。

即使该应用程序将是“单页应用程序”，我仍然希望对用户身份进行验证并授权用户使用该应用程序中的某些选项，就像在MVC应用程序中所做的一样。

这样做的唯一选择是创建Blazor应用程序吗？

Answer 1

对于身份验证和授权，您应该使用身份验证令牌（例如JWT）。当客户端登录到系统并将其发送到客户端时，后端应创建一个auth令牌。您的服务器还应将经过身份验证的用户信息发送到客户端（反应应用程序），以便您可以根据用户类型呈现正确的页面。例如，您可以为管理员类型的用户呈现管理页面，为访客类型的用户呈现访客页面。您可以在Redux中将此用户数据另存为JSON。因此，您可以从任何响应组件访问用户数据。另外，在后端，必须根据客户端发送的auth令牌来限制端点。在我的应用程序后端，请按照以下步骤操作：

Authentication check -> Authorization check -> controller (endpoint) -> result

Answer 2

React对此没有意见，因此由您来设计实现。一种基本方法是：

1. 登录并从后端获取授权的JWT令牌，并在签名时包含帐户ID
2. 将JWT令牌存储在localStorage中，将帐户信息存储在Redux中
3. 根据前端的帐户信息（即管理员组）有条件地限制路由
4. 让每个经过身份验证的API调用都在x-auth-token标头中包含JWT令牌，然后在后端使用中间件检查其是否仍然有效。然后，您还可以解码帐户ID以便检查其特权，以便限制API访问权限

这可能会有所帮助：https://medium.com/@faizanv/authentication-for-your-react-and-express-application-w-json-web-tokens-923515826e0#5f52

Answer 3

不确定您是否仍然需要它-我个人觉得我们应该有一些办法可以缩小服务器和客户端之间的authZ差距，以使其变得容易。为此，我花了几天时间在github项目上，这里是：authzyin。

我试图做的是利用来自asp.net核心的基于策略的授权-我认为这很酷-并自动通过钩子将相同的定义带给客户端以在React中使用。

对于身份验证，我针对AAD使用msal.js-因此authN在客户端上完成，而jwt承载令牌auth用于所有请求。

它有一个客户端库和一个服务器库，可以一起使用或分别使用。当然，它可能仍然缺少某些功能-请随时将其作为参考（也欢迎您提供帮助）。