Javascript：如何基于安全角色显示隐藏div

我一直在使用JQuery和AngularJS。我的一个要求是根据登录用户角色显示/隐藏div和其他小部件。我实施了以下解决方案：-

• 在页面加载时，获取登录用户的角色，并将其作为全局变量存储在javascript中
• 显示完整页面
• 使用基于安全角色的简单if语句隐藏div
  这是最好的方式吗？这不是有一些框架或库吗？AngularJS没有什么可以帮忙的吗

---

顺便说一句，我知道服务器端安全性是必须的，尽管可以控制登录用户在浏览器中看到的小部件。

您可以查看类似角度模式表单的内容。这将获取一个JSON对象，并使用HTML模板将其呈现出来

另一种方法是为每个小部件使用模板，然后在检索模板之前检查角色。如果未检索模板，则自定义标记将保持为空且没有内容

if isAuthorized
    get template
else
    do nothing or remove the element (your call) 

---

第一种方法的好处是，您的标记是从服务器端数据生成的，因此具有更安全的额外好处。不过，第二种方法也会奏效

请注意，您可以更改javascript中的任何内容，包括客户端的全局变量和javascript代码，因此您的服务器不能信任客户端

如果希望基于全局变量显示/隐藏div，则可以，但服务器不应使用该全局变量来确定用户权限。对于隐藏的div，您不应该使用DB中的数据填充它们，因此即使客户端更改CSS，它们也不能看到不允许的数据。更不用说，他们可以随时检查网络，查看返回的JSON中的内容

---

不过，通常不需要存储为全局变量。如果您的用户进行了正确的身份验证，那么您应该为每个事务（每个ajax请求）验证他的身份，并且只返回相关内容。在Angular view中，如果数据只存在，您可以执行

ng。
您是否有任何服务器端身份验证，如passportjs，我建议您查看一下mean.js样板代码。他们实现passportJs服务器端身份验证，然后创建一个角度“身份验证”服务来存储用户。那么您所要做的就是ng if=“Authentication.user.role=”用户角色“