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 相关文章推荐
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
vue实现简单loading进度条
Jun 06 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
打造自己的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/01/27 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
设定php简写功能的方法
2019/11/28 PHP
javascript学习网址备忘
2007/05/29 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
原生js实现俄罗斯方块
2020/10/20 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
详解Django解决ajax跨域访问问题
2018/08/24 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
化妆师职业生涯规划书
2014/02/16 职场文书
初一学生期末评语
2014/04/24 职场文书
大学生个人学习总结
2015/02/15 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
vue 实现上传组件
2021/05/31 Vue.js
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
python开发制作好看的时钟效果
2022/05/02 Python