在客户端应用程序中按角色过滤 UI 的策略答案

【问题标题】：Strategies to filter UI by role in a client side app在客户端应用程序中按角色过滤 UI 的策略
【发布时间】：2023-04-04 15:41:02
【问题描述】：

我想知道人们使用什么策略来根据客户端应用中的授权过滤 UI 元素。

基本上，我有一个 API 为数据和业务逻辑提供安全性（通过用户和角色身份验证），但在 UI 前端，在运行时简单地隐藏选项（甚至路由）有点奇怪。

例如

url/api/staff api 端点只能由 hr-managers 角色访问，但 Web 应用在 url/rh/staff 中有一个页面（在导航中带有指向它的链接）。

我可以根据当前用户过滤导航，甚至状态转换。但这是客户端代码，最终任何人都可以弄乱它。

有没有更好的办法？

我将 Node/Express 用于 API，将 Angular 用于 UI，但我对通用策略更感兴趣，而不是这些框架的特定解决方法。

【问题讨论】：

【解决方案1】：

由于信息隐藏并不重要（服务器提供终极安全性），您只需要一种简单的以演示为中心的方式来隐藏指向禁区的链接，以方便最终用户。 CSS 是完美的，它比试图用 JS 隐藏一大堆部分的清单或与任何给定的框架配合使用要简单得多； CSS 对于基本的显示/隐藏效果几乎没有兼容性问题。

我需要在工作中完成完全相同的任务，这是我实施的基本策略，并且效果很好；我很喜欢分享和推荐。

在<html> 或<body> 上将ROLE 作为类（或数据属性）注入。例如：<html class=user> 或 <body class=admin>
将“admin”或其他特定角色类添加到要隐藏的链接/部分。例如：<a href=/nogo/ class=admin>CP</a>
添加一小段 CSS 隐藏“根角色”和“元素角色”的某些组合：

CSS：

html .admin { display: none; }
html.admin .admin { display: inherit; }

或使用数据属性：

html .admin { display: none; }
html[data-role='admin'] .admin { display: inherit; }

您还可以创建一个层，并使用更多的 CSS 来允许更具体的访问，例如允许管理员查看所有内容，而管理员可以查看用户+管理员部分：

html .admin,
html .manager{ display: none; }

html.manager .manager,
html.admin .manager,
html.admin .admin, { display: inherit; }

通过注入属性并将 CSS 规则添加到网站样式中，您需要做的就是将 apropos 属性/类添加到要控制的标签中。这意味着几乎没有冲突，它在没有 JS 的情况下工作，在页面显示之前预先隐藏（没有 FOUC），并且在您的网站内部工作中无需准备课程即可轻松更改。

【讨论】：

【解决方案2】：

基本上你自己回答问题，你总是可以弄乱客户端中的任何逻辑使用控制台调用方法等。所以如果有任何关键你应该把它放在服务器端。

我的建议是向客户端发布（一部分）权限并过滤菜单。如果你弄乱了 UI，你可能会得到屏幕但不能得到数据。

【讨论】：

【解决方案3】：

这是我为 Angular 应用程序中的角色/权限管理编写的概述：https://gist.github.com/bvaughn/90343c06467e9bcb8d27

概述了从路由到状态层次结构的所有内容，并且基于我自己编写几个大型 Angular 应用程序的经验。

当然，因为这是客户端代码，它本质上归结为“在运行时隐藏东西”——尽管被隐藏的东西只是按钮或链接。未经授权的用户不应访问服务器上的任何远程数据，这是重要的部分。

【讨论】：