在客户端应用程序中按角色筛选UI的策略

Strategies to filter UI by role in a client side app

本文关键字：筛选 UI 策略 角色 客户端 应用程序      更新时间：2024-06-14

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

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

例如

url/api/staff api端点只能由人力资源经理角色访问，但web应用程序在url/rh/staff中有一个页面（导航中有指向它的链接）。

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

有更好的方法吗？

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

由于信息隐藏不是关键的（服务器提供了最终的安全性），您只需要一种简单的以演示为中心的方式来隐藏到禁区的链接，以方便最终用户。CSS非常适合这一点，它比试图用JS隐藏一个章节的洗衣清单或对任何给定的框架表现得很好要简单得多；CSS在基本的显示/隐藏效果方面几乎没有兼容性问题。

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

  1. 将ROLE作为类（或数据属性）注入CCD_ 1或CCD_。示例：<html class=user>或<body class=admin>
  2. 将"admin"或其他特定的仅角色类添加到要隐藏的链接/节中。示例：<a href=/nogo/ class=admin>CP</a>
  3. 添加一小段CSS，隐藏"根角色"answers"元素角色"的某些组合：

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规则添加到网站的样式中，您所需要做的就是将合适的attribs/classes添加到您想要控制的标签中。这意味着几乎没有冲突，它在没有JS的情况下工作，在页面显示之前是预先隐藏的（没有FOUC），并且在您的网站内部工作中无需准备课程即可轻松更改。

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

我的建议是向客户端发布（一个子集）权限并过滤菜单。如果你把UI搞砸了，你可能可以得到屏幕，但不能得到数据。

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

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

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

相关文章：