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配置，数据什么的都是从后端请求的，状态不对也请求不到数据的，所以攻陷数据库才算是真黑，从前端的脚本做拦截只是玩玩测试；

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

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

赞 (0)

相关推荐

  • AngularJs页面筛选标签小功能

    AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

  • 基于AngularJS实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改

  • Angularjs实现多个页面共享数据的方式

    废话不多说了,直接看干货吧. 使用service来共享数据 定义一个共享服务的service //家电维修共享数据的服务 angular.module("sqhApp").factory("repairDeviceDataShareServer",function($http,$state,$ionicPopup){ return { //缓存当前需要维修的设备名称.数量.唯一标识 deviceRepairObj : [], //小区位置 xiquLocation:

  • 使用Jasmine和Karma对AngularJS页面程序进行测试

    AngularJS是继jQuery之后发生在JavaScript上最好的东西.这也是JavaScript开发一直以来想要的方式.Angular主要的优点之一就是它的依赖注入(Dependency Injection),它非常利于代码的单元测试.但有点小怪异的是,我在无论如何都没能找到一个介绍如何做单元测试的教程. 当然有很多不错的推荐:使用Jasmine测试框架和Karma测试执行器(Test Runner):但是并没有一篇完整的从无到有指导如何测试的教程.所以我写了这篇文章.我在网上找了很多资

  • 微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决

    今天偶然的把微信jssdk的debug打开后,发现调试信息总是提示签名错误,感情前两天api的"偶尔"不生效,不是因为还没执行代码,而是因为签名没正确啊!,这就是个100%可以重现的错误 但只要这个SPA刚刷新过,或加载完后中途没有跳转,,签名就会是正确的. 而当路由发生改变,我们对新"跳转"的页面重新签名之后,却出现了签名错误,而我们的签名明明是正确的,把各种参数拿去微信JS签名校验工具(http://mp.weixin.qq.com/debug/cgi-bin/

  • AngularJS中update两次出现$promise属性无法识别的解决方法

    AngularJS中update两次出现$promise属性无法识别的解决方法

    前言 本文主要介绍的是在AngularJS中update两次出现$promise属性无法识别的解决方法,下面话不多说,先来看看错误提示,然后再看看解决的办法吧. 一.错误信息如下: ERROR 2015-12-02 14:33:17,653 http-bio-8080-exec-42 o.s.s.r.i.e.InternalErrorExceptionMapper - Unrecognized field "$promise" (class com.inetpsa.fnd.rest.c

  • 模板视图和AngularJS之间冲突的解决方法

    本文实例讲述了模板视图和AngularJS之间冲突的解决方法.分享给大家供大家参考,具体如下: 问题: 在php的mvc视图中,我们需要在加载的过程中 传递一些数据给模板: 如: 这里是某个 controller $data['users'] = {something from databases}; $this->load->view('home/index',$data); 这里是对应的视图 <div ng-controller="loadData"> &l

  • AngularJS打开页面隐藏显示表达式用法示例

    本文实例讲述了AngularJS打开页面隐藏显示表达式用法.分享给大家供大家参考,具体如下: 1.使用 ng-cloak, 同时要在css加入一行 [ng-cloak] {display: none;} 样式 [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 2.使用ng-bind, 代替{{}} 这个不太方便,因为使用ng-bin

  • AngularJS页面访问时出现页面闪烁问题的解决

    我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间.这里的间隔可能很小,甚至让人感觉不到区别:但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面. 这种情况被叫做Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上. 1.ng-cloak ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含

  • AngularJS使用ng-inlude指令加载页面失败的原因与解决方法

    本文实例讲述了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法.分享给大家供大家参考,具体如下: AngularJS中提供的ng-include指令,很类似于JSP中的<jsp:include>用来将多个子页面合并到同一个父页面中,避免父页面过大,可读性差,不好维护. 父页面parent.html代码如下: <html> <head> <script src="angular-1.2.2/angular.js">&

  • 使用AngularJS实现可伸缩的页面切换的方法

    AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易.只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出. 演示: http://embed.plnkr.co/PqhvmW/preview 首先,标记: <div class="page-container"> <div ng-view class="page-view&qu

  • AngularJs bootstrap搭载前台框架——基础页面

    AngularJs bootstrap搭载前台框架——基础页面

    1.用AngularJs app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了,首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css(当然是bootstrap的),代码如下: <script src="lib/angular/angular.min.js"></script> <script src="lib/jquery/jquery-1.10.2.min.js"></scrip

  • AngularJS通过$location获取及改变当前页面的URL

    注意 本文中获取与修改的URL以 'http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例: 一. 获取url的相关方法(不修改URL): 1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值): var url = $locati

随机推荐