当前位置: 首页 > Web前端 > CSS

如何在前端管理用户权限

时间:2023-03-30 13:24:23 CSS

1:问题:如果你在搭建师生管理系统,学生提交申请,老师负责审核(或者需要添加其他角色,以及功能权限不同)。现在的问题是每个角色登录看到的界面应该是不一样的,那么如何实现这个页面的区分呢?2:要不要设计一套师生页面?这样是不是工作量太大了,如果再加上其他角色,是不是每个角色都对应一套代码?因此,我们需要使用一套页面来适应不同的用户角色,根据不同的身份给予不同的权限。3:权限设计和管理是一个很复杂的问题,涉及的东西很多。相比前端,更偏向于后端。在收集相关资料的过程中,发现里面有很多关于数据库的知识,权限管理的几个java框架,比如spring,shiro等,都属于后端工作4:What我们可以在前端做吗?RBAC基于角色的访问控制在权限设计中比较常见。其基本思想是系统操作的各种权限不是直接授予具体用户,而是在用户集和权限集之间建立一个角色集。每个角色对应一组相应的权限。一旦为用户分配了合适的角色,该用户就拥有该角色的所有操作权限。这样做的好处是不需要每次创建用户都分配权限,只要给用户分配相应的角色即可,而且角色的权限变化远小于用户,这将简化用户的权限管理,减少系统开销。在Angular构建的单页应用中,我们需要做一些额外的事情来实现这样的架构。从整个项目来看,前端工程师需要处理的地方大概有3个。UI处理(根据用户的权限,判断页面上的某些内容是否显示)路由处理(当用户访问一个没有权限访问的url时,跳转到一个错误提示页面)HTTP请求处理(当我们发送数据请求,如果返回状态为401或401,一般会跳转到错误提示页面)如何实现?首先需要在Angular启动前获取当前用户的所有权限,然后比较优雅的方式是通过一个服务来存储这个映射关系。对于UI处理a页面内容是否按照权限显示,我们应该通过一个指令来实现。处理完这些之后,我们还需要在添加路由的时候给它额外添加一个“permission”属性,给它赋值,表示它有哪些权限角色可以跳转到这个url,然后检查当前用户是否有访问权限这个URL通过Angular监听routeChangeStart事件。最后还需要一个HTTP拦截器来监听,当一个请求返回的状态是401或者403时,跳转页面到一个错误提示页面。大体的工作就是这些,好像有点多,但是一个一个搞定还是挺容易的。Angular运行前获取权限的映射关系Angular项目是通过ng-app启动的,但是在某些情况下我们希望Angular项目的启动在我们的控制之下。比如本例,我希望在启动AngularApp之前获取当前登录用户的所有权限映射。幸运的是,Angular本身提供了这种方式,即angular.bootstrap()。仔细看的可能会注意到,这里用到了$.get(),用jQuery代替Angular的$resource或者$http也没什么问题,因为在这个时候Angular还没有启动,还不能调用它的功能用过的。进一步使用上面的代码可以将得到的映射关系作为一个全局变量放到一个服务中使用。获取到当前用户的权限集合后,我们将这个集合存档到对应的服务中,然后做两件事:(1)将权限存储在工厂变量中,使其一直在内存中,实现全局变量的作用,但是没有命名空间的污染。(2)通过$broadcast广播事件,当权限改变时。如何根据权限决定UI组件的显示和隐藏这里需要我们自己写一个指令,根据权限关系来显示或隐藏元素。这里我们看到最理想的情况是传递一个has-permission属性来验证权限的名称。当前用户有则显示,没有则隐藏。扩展之前的工厂:这样:当我们定义一个路由时,我们添加一个权限属性。该属性的值就是我们访问当前url有什么权限。然后我们一直通过routeChangeStart事件监听url的变化。每次我们更改url的时候,都需要检查当前跳转的url是否满足条件,然后再决定是跳转成功还是跳转到错误的提示页面。router.js:mainController.jsorindexController.js(简称父层Controller)之前写的hasPermission这里还是用到了,这些东西都是高度可复用的。这个做完了。每个视图的路由跳转前,在父容器的Controller中判断是否有跳转权限即可。HTTP请求处理相对来说应该是很容易处理的,思路也很简单。因为Angular应用推荐的是RESTful风格的接口,所以HTTP协议的使用非常清晰。如果请求返回的状态码是401或者403,就说明没有权限,那么直接跳转到相应的错误提示页面即可。当然,我们不可能对每一个请求都进行人工检查和转发,所以我们肯定需要一个通用的过滤器。代码如下:写到这里,我们就基本实现了前后端分离模式接下来是前端部分的权限管控》我们相信人人都可以成为工程师,现在就开始吧,找师兄指导入门,学习路上不再迷茫,这里是技能树。IT修真学院:http://www.jnshu.com,初学者聚集地转投互联网行业。”欢迎加入IT交流群565734203与大家一起探讨交流