【问题标题】：Is it possible to build hidden areas / React-Components based on serverside data?是否可以基于服务器端数据构建隐藏区域/React-Components？
【发布时间】：2019-11-08 12:19:47
【问题描述】：

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

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

用户权限存储在一个以前在jsf中使用的数据库中。我们要切换到“2019”而不是保留“2010 技术”。在 JSF 中，我们将用户权限信息存储在 Session-Scoped bean 中，然后我们构建具有可以呈现或不呈现的组件的页面（例如 <button render=#{user.isallowedto}>）。

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

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

【问题讨论】：

当然。和基本相同的想法。例如在某些渲染中：render (){return user.isallowed && (<Button/>)
当然可以，但是，React 与 Node 或 express-session 无关，这些都是服务器端的问题。您只需将相关权限返回给客户端，然后（类似于您在 JSF 中所做的）处理禁用或阻止相关页面/组件。
非常感谢。我们完全像这样得到它。但我们需要将用户权限数据安全传递给客户端。如果您通过 cookie 进行操作，据我们所知，可以更改 cookie 数据。这将导致这样一个事实，用户可以看到一个页面（空白，由于服务器端处理的 api 安全性）......在 cookie 中使用散列数据是否是一种选择？

标签： node.js reactjs express passport.js

【解决方案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 应用程序中构建的不同类型的保护。

【讨论】：

非常感谢您的快速答复。基本上我们就是这样理解的，我们的基本概念就像你的想法一样。我们的问题与您提到的isAdmin 参数有关。正如我们所看到的，这个参数可以由我们的登录过程提供，但存储在客户端（例如在 cookie 中）。这意味着，用户可能会更改此数据并查看按钮。正如您所提到的，API 也会受到保护，因此用户可能会更改客户端的可见性，但他不会访问任何数据。我们做对了吗？
@FabianLinn 是的，如果数据在服务器端受到保护，那是正确的，那么您不必担心。就我个人而言，我会将登录令牌存储在 cookie 或本地存储中，但是当用户登录时，他们可能会访问一些数据，例如姓名、电子邮件、性别，此时您可以添加一个 role 密钥来区分您的访问权限用户有。因此，当用户登录时，他们将滚动作为数据获取，您可以将其放入您的状态管理工具 (redux) 中，并在渲染组件时检查它的访问权限。