用户访问的身份认证和表单验证

在RBAC，基于角色的访问控制在认证机构的设计中很常见。基本思想是系统运行的各种权限不是直接授予特定用户，而是在用户集和权限集之间建立角色集。每个角色对应一组相应的权限。一旦为用户分配了适当的角色，该用户就拥有该角色的所有操作权限。这样做的好处是不需要每次创建用户都分配权限，只需要分配用户对应的角色即可，角色权限的变化远小于用户权限的变化，这样会简化用户的权限管理，降低系统的开销。在Angular构建的单页应用程序中，我们需要做一些额外的事情来实现这个架构。就整个项目而言，前端工程师需要处理的地方大概有三个。1.UI处理(根据用户权限，是否显示页面上的一些内容)2。路由处理(当用户访问他无权访问的url时，跳转到错误提示页面)3。HTTP请求处理(当我们发送数据请求时，如果返回的状态是401或403，通常会重定向到错误提示页面)。

身份控制的实现需要在Angular启动之前获得当前用户的所有权限，然后优雅的方式是通过一个服务来存储这个映射关系。我们应该使用一个指令来实现UI是否根据权限来处理页面上要显示的内容。当所有这些都被处理时，我们还需要在添加路由时添加一个额外的“权限”属性，并为其分配一个值，以指示哪些角色有权跳转到该网址。然后通过routeChangeStart事件的Angular监控，检查当前用户是否有访问该URL的权限。最后，需要一个HTTP拦截器来监控当请求返回的状态为401或403时，页面跳转到错误提示页面。一般的工作就是这样，看起来有点多，但实际上很容易一个一个处理。返回401，执行loginCtrl，返回403执行PermissionCtrl。Angular项目是在Angular运行前获得权限的映射关系后，由ng-App启动的，但在某些情况下，我们希望在自己的控制下启动Angular项目。比如在这种情况下，我希望在启动Angular app之前得到当前登录用户权限的所有映射关系。幸运的是，Angular本身提供了这种方式，即angular.bootstrap()。

var permissionListangular.element(文档)。ready(function() { $)。get('/api/UserPermission '，函数(数据){ permissionList=dataangular.bootstrap(文档，[' App '])；});});仔细看的人可能会注意到。这里使用了get()方法，没有误用jQuery代替Angular $资源或$http，因为此时Angular还没有启动，它的功能还不能使用。进一步使用上述代码可以将获得的映射关系作为全局变量放入服务中使用。

//app。js var app=angular。模块(' myApp '，[])，permissionListapp.run(函数（权限){权限。set permissions(PermissionList)})；角元素(文档)。ready(function() { $).get('/api/UserPermission '，函数（数据){ permissionList=data angular . bootstrap(文档，[' App '])；});});//common _ service。js angular。模块(' myApp ').工厂(“权限”，函数($ RootScope){ var PermissionList；返回{设定许可3360函数（权限){ permissionList=permissions $ root scope .$ broadcast(' permissionschhanged ')} }；});在取得当前用户的权限集合后，我们将这个集合存档到对应的一个服务中，然后又做了2件事： (1) 将许可存放到工厂变量中，使之一直处于内存中，实现全局变量的作用，但却没有污染命名空间。(2) 通过$广播广播事件，当权限发生变更的时候.1.如何确定用户界面组件的依据权限进行显隐这里我们需要自己编写一个指令，它会依据权限关系来进行显示或者隐藏元素。

！-如果用户具有编辑权限，则显示链接- div具有-权限='编辑a href='/#/课程/{ { id } }/编辑{ name }}/a /div！-如果用户没有编辑权限，则仅显示文本（注意'!'在"编辑"之前- div有-权限='！编辑" { name }} /div这里看到了比较理想的情况是通关一个允许属性校验同意的名字，如果当前用户有则显示，没有则隐藏。

angular.module('myApp ').指令(“hasPermission”，函数(权限){返回{ link :函数(作用域、元素、属性){ if(！_.isString(attrs。hasPermission))抛出“hasPermission值必须是字符串";定义变量值=attrs。haspermission。trim()；var notPermissionFlag=值[0]==='!'；if(notPermissionFlag){ value=value。切片(1).trim()；}函数toggleVisibilityBasedOnPermission(){ var hasPermission=permissions。hasPermission(值);if(hasPermission！notPermissionFlag ||！hasPermission notPermissionFlag)元素。show()；其他元素。hide()；} toggleVisibilityBasedOnPermission()；范围$ on(' permissionschhanged '，toggleVisibilityBasedOnPermission)；} };});扩展一下之前的工厂：

angular.module('myApp ').工厂(“权限”，函数($ RootScope){ var PermissionList；返回{设定许可3360函数（权限){ permissionList=permissions $ root scope .$ broadcast(' permissionschhanged ')}，hasPermission:函数(权限){权限=权限。trim()；return _ .一些(权限列表)，函数(项目){ if(_).isString(项。名称))返回项目名字。trim()===permission })；} };});2.路由上的依权限访问这一部分的实现的思路是这样： 当我们定义一个路由的时候增加一个同意的属性，属性的值就是有哪些权限才能访问当前url .然后通过routerchangesgertart事件一直监听全球资源定位器(统一资源定位符)变化。每次变化全球资源定位器(统一资源定位符)的时候，去校验当前要跳转的全球资源定位器(统一资源定位符)是否符合条件，然后决定是跳转成功还是跳转到错误的提示页面。

app.config(函数($ RouterProvider){ $ RouterProvider .当('/'，{ template URLs : '查看/查看广告时。html '，控制器： ' viewcroadsctrl ' }).当('/unauthorized '，{ templateurl : '视图/错误。html '，controller: 'ErrorCtrl' })时当('/courses/:id/edit '，{ template URLs : '查看/编辑课程时。html '，controller: 'editCourses '，权限： ' Edit ' })；});mainController.js或者indexController.js(总之是父层控制器)

app.controller('mainAppCtrl '，函数($scope，$location，permissions) { $scope .$ on($ RoutHealth '，函数（作用域，下一个，当前){ var permission=next .$ $ route.permissionif(_ .isString(权限)!权限。has permission(permission))$ location。路径('/未经授权')；});});这里依然用到了之前写的hasPermission，这些东西都是高度可复用的。这样就搞定了，在每次视角的途径跳转前，在父容器的控制器中判断一些它到底有没有跳转的权限即可。

3.超文本传送协议请求处理这个应该相对来说好处理一点，思想的思路也很简单。因为有角的应用推荐的是安静的风格的借口，所以对于超文本传送协议协议的使用很清晰。对于请求返回的状态代码如果是401或者403则表示没有权限，就跳转到对应的错误提示页面即可。当然我们不可能每个请求都去手动校验转发一次，所以肯定需要一个总的过滤器。代码如下：

angular.module('myApp ').config(函数($ http provider){ $ http provider。响应拦截器。push(' securityInterceptor ')；}) .提供程序(' securityInterceptor '，函数(){这个.$get=function($location，$ q){ return function(promise){ return promise。然后(null，function(response){ if(response。状态===403 | |响应。status===401){ $ location。路径('/未经授权')；}返回$q.reject(响应);});};};});写到这里就差不多可以实现在这种前后端分离模式下，前端部分的权限管理和控制了。

表单验证AngularJS前端验证指令

var rcSubmit指令={ ' rcSubmit ' :函数($parse) { return { restrict: 'A '，require: [ 'rcSubmit '，'？form' ]，controller: function() { this。未遂=false var form controller=null this。设置未遂=function() { this。未遂=true }；这个。setformcontroller=函数(控制器){ formController=控制器；};这个。needsattenion=函数(现场模型控制器){ if(！formController)返回false if(field model controller){ 0返回fieldModelController .$无效(现场模型控制器.$dirty ||这个。未遂);} else {返回表单控制器表单控制器.$无效(表单控制器.$dirty ||这个。未遂);} };}，编译：函数(){返回{ pre :函数(作用域、formElement、属性、控制器){ var submit controller=controller[0]；var formController=控制器。长度1？控制器[1] :为空；提交控制器。setformcontroller(formController)；范围。RC=范围。RC | | { }；范围。RC[属性。名称]=提交控制器；}，邮政：函数（作用域、formElement、属性、控制器){ var submit controller=controller[0]；var formController=控制器。长度1？控制器[1] :为空；var fn=$ parse(属性。RC submit)；formElement.bind('submit ')，函数（事件){提交控制器。setter rent()；if(！范围$ $阶段)范围$ apply()；if(！表单控制器.$有效)返回；范围$apply(function() { fn(scope，{ $ event : event })；});});} };} };} };验证通过

表单名称=' loginFOrm ' novalidate ng-app=' loginput ' ng-controller=' LoginController ' RC-submit=' log in()' div class=' form-group ' ng-class=' { ' has-error ' : RC。登录信息。需求状态(登录信息。Username)} '输入类=' form-controller '名称=' Username '类型=' text '占位符=' Username '必需ng-model=' session。用户名/span class=' help-block ' ng-show样式如下

前端验证通过会调用登录().