gpt4 book ai didi

javascript - 在客户端应用程序中按 Angular 色过滤 UI 的策略

转载 作者:行者123 更新时间:2023-12-03 10:41:23 24 4
gpt4 key购买 nike

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

基本上,我有一个 API 可以为数据和业务逻辑提供安全性(通过用户和 Angular 色身份验证),但在 UI 方面,在运行时简单地隐藏选项(甚至路由)似乎很奇怪。

例如

url/api/staff api 端点只能由 hr-managers Angular 色访问,但 Web 应用程序在 url/rh/staff 中有一个页面(在导航中包含指向该页面的链接)。

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

有更好的方法吗?

我使用 Node/Express 作为 API,使用 Angular 作为 UI,但我对通用策略更感兴趣,而不是这些框架的具体解决方法。

最佳答案

由于信息隐藏并不重要(服务器提供最终的安全性),因此您只需要一种简单的以演示为中心的方法来隐藏指向禁区的链接,以方便最终用户。 CSS 非常适合这一点,而且它比试图用 JS 隐藏一长串的部分或与任何给定的框架很好地配合要简单得多; CSS 对于基本的显示/隐藏效果几乎没有兼容性问题。

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

  1. 将 ROLE 作为类(或数据属性)注入(inject) <html><body> 。示例:<html class=user><body class=admin>
  2. 将“admin”或其他特定 Angular 色专用类添加到要隐藏的链接/部分。示例:<a href=/nogo/ class=admin>CP</a>
  3. 添加一小部分 CSS,隐藏“根 Angular 色”和“元素 Angular 色”的某些组合:

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; }

将属性注入(inject)并将CSS规则添加到网站的样式后,您所需要做的就是将apropos attribs/classes添加到您想要控制的标签中。这意味着几乎没有冲突,它无需 JS 即可工作,在页面显示之前预先隐藏(无 FOUC),并且无需在网站内部工作中进行准备类(class)即可轻松更改。

关于javascript - 在客户端应用程序中按 Angular 色过滤 UI 的策略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28764901/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com