AngularJS中实现用户访问的身份认证和表单验证功能
前端之家收集整理的这篇文章主要介绍了
AngularJS中实现用户访问的身份认证和表单验证功能，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
身份验证
权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是，对系统操作的各种权限不是直接授予具体的
用户，而是在
用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。
一旦
用户被分配了适当的角色后，该
用户就拥有此角色的所有操作权限。这样做的好处是，不必在每次创建
用户时都进行分配权限的操作，只要分配
用户相应的角色即可，而且角色的权限变更比
用户的权限变更要少得多，这样将简化
用户的权限管理，减少系统的开销。
在Angular构建的单
页面应用中,要实现这样的架构我们需要额外多做一些事.从整体项目上来讲,大约有3处地方,前端工程师需要进行处理.
1. UI处理(根据
用户拥有的权限,判断
页面上的一些
内容是否
显示)
2. 路由处理(当
用户访问一个它没有权限访问的url时,
跳转到一个
错误提示的
页面)
3. HTTP请求处理(当我们发送一个数据请求,如果返回的status是401或者
403,则通常
重定向到一个
错误提示的
页面)
访问身份控制的实现
首先需要在Angular启动之前就
获取到当前
用户的所有的 permissions,然后比较优雅的方式是通过一个service存放这个映射关系.对于UI处理一个
页面上的
内容是否根据权限进行
显示,我们应该通 过一个directive来实现.当处理完这些,我们还需要在
添加一个路由时额外为其
添加一个"permission"
属性,并为其赋值表明拥有哪些权限 的角色可以
跳转这个URL,然后通过Angular监听routeChangeStart事件来进行当前
用户是否拥有此URL访问权限的校验.最后还需要 一个HTTP
拦截器监控当一个请求返回的status是401或者
403时,@R_155_
404@面到一个
错误提示页面.大致上的工作就是这些,看起来有些多,其实一个个来还是挺好处理的.
返回401，执行loginCtrl，返回
403执行PermissionCtrl。
在Angular运行之前获取到permission的映射关系
Angular项目通过ng-app启动,但是一些情况下我们是希望 Angular项目的启动在我们的控制之中.比如现在这种情况下,我就希望能获取到当前登录用户的所有permission映射关系后,再启动 Angular的App.幸运的是Angular本身提供了这种方式,也就是angular.bootstrap().
<div class="jb51code">
<pre class="brush:js;">
var permissionList;
angular.element(document).ready(function() {
$.get('/api/UserPermission',function(data) {
permissionList = data;
angular.bootstrap(document,['App']);
});
});
看的仔细的人可能会注意到,这里使用的是$.get(),没有错用的是jQuery而不是Angular的$resource或者$http,因为在这个时候Angular还没有启动,它的function我们还无法使用.
进一步使用上面的代码可以将获取到的映射关系放入一个service作为全局变量来使用.
app.run(function(permissions) {
permissions.setPermissions(permissionList)
});
angular.element(document).ready(function() {
$.get('/api/UserPermission',['App']);
});
});
// common_service.js
angular.module('myApp')
.factory('permissions',function ($rootScope) {
var permissionList;
return {
setPermissions: function(permissions) {
permissionList = permissions;
$rootScope.$broadcast('permissionsChanged')
}
};
});
在取得当前用户的权限集合后,我们将这个集合存档到对应的一个service中,然后又做了2件事:
(1) 将permissions存放到factory变量中,使之一直处于内存中,实现全局变量的作用,但却没有污染命名空间.
(2) 通过$broadcast广播事件,当权限发生变更的时候.
1.如何确定UI组件的依据权限进行显隐
这里我们需要自己编写一个directive,它会依据权限关系来进行
显示或者隐藏元素.
这里看到了比较理想的情况是通关一个has-permission属性校验permission的name,如果当前用户有则显示,没有则隐藏.
var value = attrs.hasPermission.trim();
var notPermissionFlag = value[0] === '!';
if(notPermissionFlag) {
value = value.slice(1).trim();
}
function toggleVisibilityBasedOnPermission() {
var hasPermission = permissions.hasPermission(value);
if(hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag)
element.show();
else
element.hide();
}
toggleVisibilityBasedOnPermission();
scope.$on('permissionsChanged',toggleVisibilityBasedOnPermission);
}
};
});
扩展一下之前的factory:
2.路由上的依权限访问
这一部分的实现的思路是这样: 当我们定义一个路由的时候
增加一个permission的
属性,
属性的值就是有哪些权限才能访问当前url.然后通过routeChangeStart事 件一直监听url变化.每次变化url的时候,去校验当前要
跳转的url是否符合条件,然后决定是
跳转成功还是
跳转到
错误的
提示页面.
mainController.js 或者 indexController.js (总之是父层Controller)
这里依然用到了之前写的hasPermission,这些东西都是高度可复用的.这样就搞定了,在每次view的route跳转前,在父容器的Controller中判断一些它到底有没有跳转的权限即可.
3.HTTP请求处理
这个应该相对来说好处理一点,思想的思路也很简单.因为Angular应用推荐的是RESTful风格的借口,所以对于HTTP协议的使用很清晰.对于请求返回的status code如果是401或者
403则表示没有权限,就
跳转到对应的
错误提示页面即可.
当然我们不可能每个请求都去手动校验转发一次,所以肯定需要一个总的filter.
代码如下:
403 || response.status === 401) {
$location.path('/unauthorized');
}
return $q.reject(response);
});
};
};
});
写到这里就差不多可以实现在这种前后端分离模式下,前端部分的权限管理和控制了。
表单验证
AngularJS 前端验证指令
1 ? controllers[1] : null;
submitController.setFormController(formController);
scope.rc = scope.rc || {};
scope.rc[attributes.name] = submitController;
},post: function(scope,controllers) {
var submitController = controllers[0];
var formController = controllers.length > 1 ? controllers[1] : null;
var fn = $parse(attributes.rcSubmit);
formElement.bind("submit",function(event) {
submitController.setAttempted();
if (!scope.$$phase) scope.$apply();
if (!formController.$valid) return;
scope.$apply(function() {
fn(scope,{
$event: event
});
});
});
}
};
}
};
}
};
验证通过
required">required
