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 相关文章推荐
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
cache_lite试用
2007/02/14 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
JS中==与===操作符的比较
2009/03/21 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
python中的迭代和可迭代对象代码示例
2017/12/27 Python
wxPython的安装与使用教程
2018/08/31 Python
python八皇后问题的解决方法
2018/09/27 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python3注册全局热键的实现
2020/03/22 Python
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
Delphi笔试题
2016/11/14 面试题
陈欧广告词
2014/03/14 职场文书
地陪导游欢迎词
2015/01/26 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python