基於angualr的權限管理設計

angular的前端權限控制

service

• authorityService以及路由跳轉控制

angular.module('frontierApp')
  .run(['$rootScope', '$state', '$cookieStore', 'userInfoService', function ($rootScope, $state, $cookieStore, userInfoService) {

    //權限控制開關,true：權限控制有效;false：權限控制將失效，通常本地調試時能夠設置爲false
    $rootScope.privilegeStart = true;

    if ($rootScope.privilegeStart) {
      $rootScope.$on("$stateChangeStart", function (evt, next, o, current) {

        if (next.name == "login")return;
        
        //受到權限控制的路由
        if (next.authority) {
          var userAuthorityList = userInfoService.getUserAutorityList();

          if (userAuthorityList) {

            //若是當前路由查詢到權限code,判斷用戶是否具備訪問權限
            var hasAuthority = false;
            for (var i = 0; i < userAuthorityList.length; i++) {

              if (next.authority.code == userAuthorityList[i].name) {
                hasAuthority = true;
                break;
              }
            }
            //若是用戶沒有權限，提示用戶，並返回歡迎頁路由
            if (hasAuthority == false) {
              
              // $rootScope.messageBox.show("當前用戶沒有<" + next.authority.page + ">頁面訪問權限", "WARNING");
              $("#noAMsgBoxMsg").html("當前用戶沒有<" + next.authority.page + ">頁面訪問權限");
              $('#noAMsgBox').modal();
              evt.preventDefault();
            }
          } else {
            var localStorage = window.localStorage;
            localStorage.removeItem('userInfo');
            $cookieStore.remove("userInfo");

            $rootScope.messageBox.show("您尚未登錄，請登錄", "WARNING");


            // 中斷路由跳轉
            evt.preventDefault();
            $state.go("login");
          }
        }
      })
    }

  }])
  .factory('authorityService', [ '$rootScope', 'userInfoService',
  	function ($rootScope, userInfoService) {
  		var service = {
  			check : function(authorityCode){
  				if($rootScope.privilegeStart){
		  			
  					var userAuthorityList = userInfoService.getUserAutorityList();
		        if (!userAuthorityList){
		        	return false;
		        }
		        for (var i = 0; i < userAuthorityList.length; i++) {
		          if (userAuthorityList[i].name == authorityCode) {
		            return true;
		          }
		        }
		  		}
  			}
  		}

  		return service ;
    }
  ])

• rootScope綁定service，在rootController中直接注入authorityService

controller('RootController',['$rootScope', 'authorityService', 
 function ($rootScope, authorityService) {
  $rootScope.authorityService = authorityService;
 }
])

受控的頁面元素

<span ng-if="authorityService.check('A001')" ui-sref="systemUserManage">系統人員管理</span>

路由控制

這裏的路由跳轉使用的是angular-ui的ui-router，因此這裏監聽的路由跳轉事件來自ui-router註冊。

受控路由配置

這裏用的是 ui-router 替換了angular-router。

angular.module('myApp.systemUserManage', ['ui.router'])
  .config(['$stateProvider', function ($stateProvider) {
    $stateProvider
      .state('systemUserManage', {
        url: '/systemUserManage',
        views: {
          templateUrl: 'modules/systemUserManage/systemUserManage_view.html',
          controller: 'SystemUserManageController'
        },
        //受控制的路由配置，權限code與後臺返回的用戶權限code對應
        authority: {code: "A005", page: "帳戶管理"}
      })
  }])

controller中的使用

有些時候須要在controller中判斷某些操做是否具備權限

controller(function($rootScope){
    if($rootScope.authorityService.check('A001')){
        ....
    }
})