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 相关文章推荐
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
Dec 23 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
Bootstrap基础学习
2015/06/16 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
python快速查找算法应用实例
2014/09/26 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
生日寿宴答谢词
2014/01/19 职场文书
护理职业生涯规划书
2014/01/24 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
Go语言读取txt文档的操作方法
2022/01/22 Golang
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫