Angular中使用ui router实现系统权限控制及开发遇到问题


Posted in Javascript onSeptember 23, 2016

前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢?

权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。

一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限。这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销。

前端基于angular开发的管理系统在权限控制方面需要处理如下几种情况:

1、UI,该用户对应的角色权限能够访问哪些页面不能访问哪些页面;

2、理由,当用户准备跳转到某一页面时,如果没有该页面的访问权,重定向到一个错误提示页面;

3、http请求,该用户是否具有访问某些API的权限,如果没有返回403

如果处理以上问题?

大致思路是:

1、用户登录后从server获取该用户的permission

2、然后建立一个service来保存该permission的映射关系,比如a用户的permission是查看page1,page2,那么在路由发生变更之前判断是否有访问的权限,有正常跳转,没有则跳转到统一的403页面或者其他。

3、对于http请求,可以让server来处理,判断用户是否有请求权限

获取用户permission,比如:

var permissionList; 
angular.element(document).ready(function() { 
$.get('/api/UserPermission', function(data) { 
permissionList = data; 
angular.bootstrap(document, ['App']); 
}); 
});

这里用到的是jquery的ajax,因为在此之前angular还没启动,如果我们的登录也是用angular实现,可以在登录之后让server返回permission,然后保存下来。

判断该用户是否具有某个权限,比如:

app.factory('permissions', function($rootScope) {
return {
hasPermission: function(permission) {
if (permission) {
if (typeof(permission) == "string") {
if (permissionList.indexOf(permission) > -1) {
return true;
}
}
}
return false;
}
};
});

路由权限控制:

app.run(function($rootScope, $location,$state, permissions) {
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
var permission = toState.permission; 
if (toState.name!="login"&&!permissions.hasPermission(permission)) {
// event.preventDefault();
// $state.transitionTo("login");
}
});
}); 
//路由配置
app.config(function($stateProvider, $urlRouterProvider, $controllerProvider) {
app.registerController = $controllerProvider.register;
app.loadJs = function(js) {
return function($rootScope, $q) {
var def = $q.defer(),
deps = [];
angular.isArray(js) ? (deps = js) : deps.push(js);
require(deps, function() {
$rootScope.$apply(function() {
def.resolve();
});
});
return def.promise;
};
};
$urlRouterProvider.otherwise('/login');
$stateProvider.state('login', {
url: '/login',
templateUrl: '/assets/console/pages/login.html',
controller: 'loginController',
resolve: {
deps: app.loadJs('./controllers/login')
}
});
$stateProvider.state('index', {
url: '/index',
templateUrl: '/assets/console/pages/home.html',
controller: 'indexController',
resolve: {
deps: app.loadJs('./controllers/index')
},
permission: "super_admin"
});
});

开发过程中实际会遇到的问题:

1、登录后如何刷新页面,因为我们的登录信息部分是server框架实现的,没完全分离,所以登录后登录信息没有刷新,可以通过判断fromState和toState来判断是否从登录页面跳转到指定页面,然后通过 $window.location.reload();实现页面的整体刷新。

2、跳转后当前导航的选中状态更新,state成功后刷新UI

app.run(['$rootScope', "$state", '$window', '$location', '$log', function($rootScope, $state, $window, $location, $log) {
$rootScope.$on('$stateChangeSuccess',
function(evt, toState, roParams, fromState, fromParams) {
//如果是登录进来就刷新页面
setTimeout(function(){
appCommon.initUI();
},500);
});
}]);

以上所述是小编给大家介绍的Angular中使用ui router实现系统权限控制及开发遇到问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
jQuery动态添加
Apr 07 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
打造自己的jQuery插件入门教程
Sep 23 #Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 #Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 #Javascript
jQuery实现边框动态效果的实例代码
Sep 23 #Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 #Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 #Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 #Javascript
You might like
PHP四大安全策略
2014/03/12 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
jquery json 实例代码
2010/12/02 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
Python2实现的图片文本识别功能详解
2018/07/11 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
数据库什么时候应该被重组
2012/11/02 面试题
小学生自我鉴定
2013/10/12 职场文书
护士自我评价
2014/02/01 职场文书
开工仪式主持词
2014/03/20 职场文书
情人节寄语大全
2014/04/11 职场文书
小学一年级学生评语
2014/04/22 职场文书
共青团员自我评价
2015/03/10 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python