[AngularJS]--权限控制
2019独角兽企业重金招聘Python工程师标准>>> 
用angular开发项目有一段时间了，最近做权限控制方面的优化，在这里总结下，也希望能给刚接触angular的同学提供些参考。
在介绍权限控制之前先要简单的介绍下angular的运行块，运行块是在注入器创建之后被执行的，它是angular应用中第一个被执行的方法，他与main方法的概念很接近，运行块通常用来注册全局的事件监听器，因此我们的权限控制自然要在运行块中实现，关于运行块这里就不做过多的介绍了，我们直接来看权限控制是如何实现的。
实现权限控制可以通过路由控制，angular的路由共有4个事件用来监听路由的状态变化: $routeChangeStart, $routeChangeSuccess, $routeChangeError, $routeUpdate.常用的是前两个，这里也不对这些事件一一做介绍了，简单说一下$routeStartChange 顾名思义，相信大家能猜出来他是表示在路由开始变化的事件。
直接看代码例子：
/** 定义路由 **/
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/query',{templateUrl:"template/query.html",controller:'queryCtrl'}).when('/orderForm', {templateUrl: 'template/order-form.html',controller: 'orderFormCtrl'}).otherwise({redirectTo: '/query'});
}]); app.run(function($rootScope,loginService,cm,$location){$rootScope.$on('$routeChangeStart', function(evt) {//需要登陆的页面地址if ($location.path()=="/orderForm") {if(是否登录成功){//阻止默认事件evt.preventDefault();//判断登陆代码var loginState=loginService.getLoginState();loginState.then(function (data) {if(!data) {//跳转到登陆页面cm.jumpLogin();}else{//登陆信息处理完成后跳转到该页面$location.path("/orderForm");}},function(data){alert(data);});} }});
}):上面的方式虽然可以实现权限的控制功能，但我在实际应用中发现route事件依然会在加载控制器之前改变地址栏的路径，这实际上不是很好的用户体验，因此我们考虑有没有其他的方式去实现这一功能，好在angular提供的$location服务能够很好的解决这一问题，同时研究后发现$location才是最适合做登陆类的权限控制，而route事件适合做些loading效果
直接看$location的实现方式：（改变事件名称为$locationChangeStart即可）
$rootScope.$on('$locationChangeStart', function (event) {//需要登陆的页面地址if ($location.path()=="/orderForm") {if(是否登录成功){//阻止默认事件evt.preventDefault();//判断登陆代码var loginState=loginService.getLoginState();loginState.then(function (data) {if(!data) {//跳转到登陆页面cm.jumpLogin();}else{//登陆信息处理完成后跳转到该页面$location.path("/orderForm");}},function(data){alert(data);});} }}});简单分析下原因：route实际上是监控location的地址的，事件的触发顺序自然是先location后route事件，因此使用location服务控制权限还可以减少不必要的路由事件操作。
转载于:https://my.oschina.net/CandyDesire/blog/472113
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！