Angularjs中的页面访问权限怎么设置  更新时间:2016年11月11日 08:41:10   作者:薛陈磊   最近一直在忙一个手机端的项目,所以对js学习有点松撤了。今天小编抽时间跟大家分享一篇关于angularjs中的页面访问权限设置教处,对angularjs访问权限感兴趣的朋友一起学习吧   在以往的项目中,前后端常见的配合方式是前端提供页面和ui加一点DuangDuangDuang的效果,后端搭建框架数据结构和数据交互(数据交互前后端有交集),不管是.net、java or php都能一对多的提供前端服务,然而在新形式下项目中运用了前端框架,开发情况就不一样了,比如我要说的这是在angular框架下完成的开发,模式是后端提供服务和api文档,页面和数据交互及逻辑处理由前端完成,前端俨然是个完全的programer了,这个过程中就会遇到之前意想不到的问题(如果没有做过后端开发),比如页面权限控制,不得不说,使用前端的方式去做这些设置比较纠结,因为这方面的数据,也就是这些权限的‘标示’,后端运行的时候是可以直接获得的,即像获取字段数据a.b点一下就出来了,而前端只能用http请求的方式获取,繁琐麻烦;   其实在ng中做页面访问权有很多种方法,各有利弊,运用的比较多的是拦截器,拦截器使得在前端往后端发送http请求之前或之后做一些操作,比如全局监测用户是否登录,没登陆就要跳转的登录页面,登录就可以访问页面;拦截器的使用往往配合后台数据,也就是获取到最新的‘标示’,来确定这个页面或者下个页面要做什么操作;而这里我使用的是一种用前端控制的方式,不用数据交互,理念就是定义好不同等级/阶段可以访问的页面,在路由的地方作拦截,针对一些不同等级/阶段访问权限定义明确的可以参考使用这种方法,代码如下: …… app.run([‘$rootScope’, ‘$state’, ‘$window’, function($rootScope, $state, $window) { $rootScope.$on(‘$stateChangeStart’, function(event, toState, toStateParams) { //用户访问等级阶段, 0 1 2 Array.prototype.contains = function(needle) { for(i in this) { if(this[i] == needle) return true; } return false; } var status=new Array(“user.a”,”user.b”,”user.c”,”user.d”,”user.e”,”user.f”,”user.g”); var status0=new Array(“user.a”,”user.b”); var status1=new Array(“user.c”,”user.d”); var status2=new Array(“user.a”,”user.b”,”user.c”,”user.d”);      if (status.contains(toState.name)) {        if(initObj.getStatus()==”0″){ if(!status0.contains(toState.name)){ event.preventDefault(); $state.go(‘user.approve’); } return; } if(initObj.getStatus()==”1″){ if(!status1.contains(toState.name)){ event.preventDefault(); $state.go(‘user.result’); } return; } if(initObj.getStatus()==”2″){ if(!status2.contains(toState.name)){ event.preventDefault(); $state.go(‘user.result’); } return; } } }) }]) ……   如码所示,在ng的run里加上state监听(我这里使用了an-route-ui),当监听到路由跳转的时候就进行检测,这里设想的可访问‘标示’的status数组里包含每个层级/阶段可访问的页面/路由,比如status里是需要检测的全集,status0、1 2分别是不同的层级/阶段的权限访问集合,也即是ng中路由跳转的哈希值,也就代表了可访问的页面,利用这种检测手段,没有访问权限的用户就不能访问某些页面,比如用户a的的层级阶段配置是status1,包含user.c和user.d,initObj.getStatus()返回了他的状态码是1,当他想访问user.a页面的时候,就会进入initObj.getStatus()==”1″的判断,但是他的配置可访问页面不包括user.a,也即!status1.contains(toState.name)(toState.name返回要跳转的页面,这里返回user.a),接下来进入下面的操作,进入公共页面或提示页面,原理基本是这样;   当然,这种方式跟后端的控制来说,是非常不安全的,也不严谨,因为就算项目中脚本进行发布压缩混淆后,细细浏览还是能找到这里的设置痕迹的,并且脚本在运行之前是可编辑的,这就会造成很大的漏洞;不过在一些小项目中使用这些配置够用了,并且就算有人修改了这个status配置,数据什么的都是从后端请求的,状态不对也请求不到数据的,所以攻陷数据库才算是真黑,从前端的脚本做拦截只是玩玩测试;   继续发掘其他的优化方法,有大神有更好的方法可以交流下;先到这里吧。   还有,光棍节到了,祝广大单身狗早日脱单。嘿嘿~~~~ 您可能感兴趣的文章: AngularJS打开页面隐藏显示表达式用法示例 AngularJS通过$location获取及改变当前页面的URL 微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决 AngularJs bootstrap搭载前台框架——基础页面 AngularJs页面筛选标签小功能 Angularjs实现多个页面共享数据的方式 AngularJS页面访问时出现页面闪烁问题的解决 使用Jasmine和Karma对AngularJS页面程序进行测试 基于AngularJS实现页面滚动到底自动加载数据的功能 使用AngularJS实现可伸缩的页面切换的方法 AngularJS中update两次出现$promise属性无法识别的解决方法 模板视图和AngularJS之间冲突的解决方法 AngularJS使用ng-inlude指令加载页面失败的原因与解决方法 angularjs 访问 权限 相关文章 AngularJS动态绑定HTML的方法分析 这篇文章主要介绍了AngularJS动态绑定HTML的方法,结合实例形式分析了AngularJS实现动态绑定HTML的相关操作指令用法与使用注意事项,需要的朋友可以参考下 2016-11-11 Angular2 (RC4) 路由与导航详解 这篇文章主要介绍了Angular2 (RC4) 路由与导航的相关资料,需要的朋友可以参考下 2016-09-09 AngularJS入门教程之数据绑定用法示例 这篇文章主要介绍了AngularJS之数据绑定用法,结合实例形式分析了AngularJS基于内置指令ng-model实现数据绑定的操作技巧,需要的朋友可以参考下 2016-11-11 AngularJS入门教程之AngularJS表达式 AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里。本文给大家介绍AngularJS入门教程之AngularJS表达式,对angularjs表达式相关知识感兴趣的朋友一起学习吧 2016-04-04 AngularJS入门之动画 AngularJS中ngAnimate模块支持动画效果,但是ngAnimate模块并未包含在AngularJS核心库中,因此需要使用ngAnimate需要在定义Module时声明对其的引用。下面通过本文我们来看看AngularJS动画的详细介绍。 2016-07-07 详解JavaScript的AngularJS框架中的作用域与数据绑定 这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下 2016-03-03 AngularJs E2E Testing 详解 本文主要介绍AngularJs E2E Testing的资料,这里整理了详细的资料,及简单代码示例,有兴趣的小伙伴可以参考下 2016-09-09 angular指令笔记ng-options的使用方法 本篇文章主要介绍了angular指令笔记ng-options的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-09-09 浅谈angular4 ng-content 中隐藏的内容 本篇文章主要介绍了浅谈angular4 ng-content 中隐藏的内容,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 Angular.js 实现数字转换汉字实例代码 这篇文章主要介绍了Angular.js 实现数字转换汉字实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2016-07-07 最新评论

  在以往的项目中,前后端常见的配合方式是前端提供页面和ui加一点DuangDuangDuang的效果,后端搭建框架数据结构和数据交互(数据交互前后端有交集),不管是.net、java or php都能一对多的提供前端服务,然而在新形式下项目中运用了前端框架,开发情况就不一样了,比如我要说的这是在angular框架下完成的开发,模式是后端提供服务和api文档,页面和数据交互及逻辑处理由前端完成,前端俨然是个完全的programer了,这个过程中就会遇到之前意想不到的问题(如果没有做过后端开发),比如页面权限控制,不得不说,使用前端的方式去做这些设置比较纠结,因为这方面的数据,也就是这些权限的‘标示’,后端运行的时候是可以直接获得的,即像获取字段数据a.b点一下就出来了,而前端只能用http请求的方式获取,繁琐麻烦;

  其实在ng中做页面访问权有很多种方法,各有利弊,运用的比较多的是拦截器,拦截器使得在前端往后端发送http请求之前或之后做一些操作,比如全局监测用户是否登录,没登陆就要跳转的登录页面,登录就可以访问页面;拦截器的使用往往配合后台数据,也就是获取到最新的‘标示’,来确定这个页面或者下个页面要做什么操作;而这里我使用的是一种用前端控制的方式,不用数据交互,理念就是定义好不同等级/阶段可以访问的页面,在路由的地方作拦截,针对一些不同等级/阶段访问权限定义明确的可以参考使用这种方法,代码如下:

......
app.run(['$rootScope', '$state', '$window', function($rootScope, $state, $window) {
$rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) {
//用户访问等级阶段, 0 1 2
Array.prototype.contains = function(needle) {
for(i in this) {
if(this[i] == needle) return true;
}
return false;
}
var status=new Array("user.a","user.b","user.c","user.d","user.e","user.f","user.g");
var status0=new Array("user.a","user.b");
var status1=new Array("user.c","user.d");
var status2=new Array("user.a","user.b","user.c","user.d"); 
     if (status.contains(toState.name)) {
       if(initObj.getStatus()=="0"){
if(!status0.contains(toState.name)){
event.preventDefault();
$state.go('user.approve');
}
return;
}
if(initObj.getStatus()=="1"){
if(!status1.contains(toState.name)){
event.preventDefault();
$state.go('user.result');
}
return;
}
if(initObj.getStatus()=="2"){
if(!status2.contains(toState.name)){
event.preventDefault();
$state.go('user.result');
}
return;
}
}
})
}])
......

  如码所示,在ng的run里加上state监听(我这里使用了an-route-ui),当监听到路由跳转的时候就进行检测,这里设想的可访问‘标示’的status数组里包含每个层级/阶段可访问的页面/路由,比如status里是需要检测的全集,status0、1 2分别是不同的层级/阶段的权限访问集合,也即是ng中路由跳转的哈希值,也就代表了可访问的页面,利用这种检测手段,没有访问权限的用户就不能访问某些页面,比如用户a的的层级阶段配置是status1,包含user.c和user.d,initObj.getStatus()返回了他的状态码是1,当他想访问user.a页面的时候,就会进入initObj.getStatus()==”1″的判断,但是他的配置可访问页面不包括user.a,也即!status1.contains(toState.name)(toState.name返回要跳转的页面,这里返回user.a),接下来进入下面的操作,进入公共页面或提示页面,原理基本是这样;

  当然,这种方式跟后端的控制来说,是非常不安全的,也不严谨,因为就算项目中脚本进行发布压缩混淆后,细细浏览还是能找到这里的设置痕迹的,并且脚本在运行之前是可编辑的,这就会造成很大的漏洞;不过在一些小项目中使用这些配置够用了,并且就算有人修改了这个status配置,数据什么的都是从后端请求的,状态不对也请求不到数据的,所以攻陷数据库才算是真黑,从前端的脚本做拦截只是玩玩测试;

  继续发掘其他的优化方法,有大神有更好的方法可以交流下;先到这里吧。

  还有,光棍节到了,祝广大单身狗早日脱单。嘿嘿~~~~

您可能感兴趣的文章:

  • AngularJS打开页面隐藏显示表达式用法示例
  • AngularJS通过$location获取及改变当前页面的URL
  • 微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
  • AngularJs bootstrap搭载前台框架——基础页面
  • AngularJs页面筛选标签小功能
  • Angularjs实现多个页面共享数据的方式
  • AngularJS页面访问时出现页面闪烁问题的解决
  • 使用Jasmine和Karma对AngularJS页面程序进行测试
  • 基于AngularJS实现页面滚动到底自动加载数据的功能
  • 使用AngularJS实现可伸缩的页面切换的方法
  • AngularJS中update两次出现$promise属性无法识别的解决方法
  • 模板视图和AngularJS之间冲突的解决方法
  • AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
张贴在3