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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
JavaScript原型对象原理与应用分析
Dec 27 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
PHP动态变静态原理
2006/11/25 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
GOJS+VUE实现流程图效果
2018/12/01 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Python将字典转换为XML的方法
2020/08/01 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
大学生职业生涯规划范文
2014/01/08 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
企业党员公开承诺书
2014/03/26 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python