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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
Mootools 1.2教程 Tooltips
Sep 15 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
JS监听Esc 键触发事键
Apr 14 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文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
数学教学随笔感言
2014/02/17 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
教师求职自荐信
2014/03/09 职场文书
员工合理化建议书
2014/05/19 职场文书
基层党组织整改方案
2014/10/25 职场文书
工程部岗位职责
2015/02/10 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
公司借条范本
2015/05/25 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
Vue和Flask通信的实现
2021/05/19 Vue.js
springboot入门 之profile设置方式
2022/04/04 Java/Android
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers