Angularjs中的页面访问权限怎么设置


Posted in Javascript onNovember 11, 2016

在以往的项目中,前后端常见的配合方式是前端提供页面和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配置,数据什么的都是从后端请求的,状态不对也请求不到数据的,所以攻陷数据库才算是真黑,从前端的脚本做拦截只是玩玩测试;

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

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

Javascript 相关文章推荐
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
基于vue实现圆形菜单栏组件
Jul 05 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 #Javascript
通过扫描二维码打开app的实现代码
Nov 10 #Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 #Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 #Javascript
jquery日历插件e-calendar升级版
Nov 10 #Javascript
Vue.js开发环境搭建
Nov 10 #Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 #Javascript
You might like
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
PHP实现统计在线人数功能示例
2016/10/15 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
如何编写jquery插件
2017/03/29 jQuery
vue-router项目实战总结篇
2018/02/11 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python写入CSV文件的方法
2015/07/08 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
简单了解python变量的作用域
2019/07/30 Python
Pytorch之parameters的使用
2019/12/31 Python
python global和nonlocal用法解析
2020/02/03 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
顶撞老师检讨书
2014/02/07 职场文书
优秀公益广告词大全
2014/03/19 职场文书
民主生活会意见
2015/06/05 职场文书
2016年端午节寄语
2015/12/04 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers