前端保护与后端保护

Question

我们需要构建一个应用程序，在该应用程序中，允许某些用户访问某些页面，而不允许其他用户访问。但这还不够，我们在该页面上有一些组件（按钮，链接），这些组件是用户不允许查看的。

因此，我们有不同的用户组（分别说a，b和c），它们可以处理不同的页面和不同的页面组件。可能用户a是完全管理员，可以查看所有页面和页面上的组件。用户b仅被允许访问项目中子部分的页面和组件。用户c可能是“只读”用户。

用户权限存储在jsf之前使用的数据库中。我们希望切换到“ 2019”，而不是保留“ 2010技术”。在JSF中，我们将用户许可权的信息存储在Session-Scoped Bean中，然后构建包含可以渲染或无法渲染的组件的页面（例如<button render=#{user.isallowedto}>）。

在具有节点后端的React应用程序中是否可以做同样的事情？通过在节点后端使用express-session和password进行具有权限处理的登录过程已经成功，但是用户权限信息也可以在我们的反应前端中使用吗？

任何帮助都会很棒！非常感谢！

Answer 1

前端保护与后端保护

前端

因此，在基本层面上，您可以通过使用这样的内容

来保护应用程序的前端

import React from 'react';

export function button ({text, action, isAdmin}) {
  if (!isAdmin) return null;

  return <button onClick={(e) => action(e)}>{text}</button>
}

其中isAdmin是您在会话中确定的，或者是通过用户名登录的。您的登录客户端应向此信息提供令牌或用户对象。

在上面的示例中，当没有管理员用户时，我们返回null，null是react组件的有效返回值，它只是不呈现任何内容。

后端

下一级别的保护来自您的后端。您需要来保护您的API服务器端，因此即使黑客更改了isAdmin可变客户端，他仍然无法访问非管理员用户无法访问的端点。但这将基于您的登录/身份验证服务以及您要构建的API类型。

但是，例如，如果您打算使用node express，则可以使用中间件检查卷。中间件在用户提出的每个请求上运行，您可以在此处检查用户登录令牌是否具有访问敏感数据的管理员权限。

结论

这只是有关如何解决此问题的高级描述，希望它使您对构建Web应用程序所需的不同保护类型有所了解。

是否可以基于服务器端数据构建隐藏区域/ React-Components？

1 个答案:

前端保护与后端保护

前端

后端

结论