angular基于路由控制ui-router实现系统权限控制


Posted in Javascript onSeptember 27, 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);
      });
  }]);
Javascript 相关文章推荐
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
javascript实现获取服务器时间
May 19 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 #Javascript
javascript动画之模拟拖拽效果篇
Sep 26 #Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 #Javascript
微信小程序 框架详解及实例应用
Sep 26 #Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 #Javascript
javascript的函数劫持浅析
Sep 26 #Javascript
JavaScript中this的四个绑定规则总结
Sep 26 #Javascript
You might like
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
Python各种扩展名区别点整理
2020/02/27 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
党支部承诺书
2015/01/20 职场文书
继承权公证书范本
2015/01/23 职场文书
会计工作能力自我评价
2015/03/05 职场文书
财务统计员岗位职责
2015/04/14 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers