angular--权限控制路由

angular实现权限控制路由

前端去实现下根据数据开控制路由，我感觉挺扯淡的，但是公司既然有需求，那我们的设计就要跟着需求走。下面是我实现权限控制路由的一种方法。

解决的思路：
    1.首先从后台获取该用户的权限
    2.建立一个server，用来判断权限数组里是否有此权限
    3.根据权限来显示路由

1.自定义服务
angular.module("manage.common")
    .factory('permissions', function($rootScope) {
        var permissionList = $rootScope.permissionList;
        return {
            isPermission: function(permission) {
                if (permission) {
                    if (typeof(permission) == "string") {
                        if (permissionList.indexOf(permission) > -1) {
                            return true;
                        }
                    }
                }
                return false;
            }
        };
    });

2.定义全局的方法
$rootScope.isPermission = function(id) {
        return permissions.isPermission(id);
    }

3.路由权限控制
app.run(function($rootScope, $location,$state, permissions) {
     $rootScope.isPermission = function(id) {
        return permissions.isPermission(id);
    }
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
      var permission = toState.permission;  
      if (toState.name!="login"&&!permissions.hasPermission(permission)) {
        event.preventDefault();
        $state.go("login");
      }
    });
  });

4.路由控制
.state("information.goods", {
            url: "/goods",
            templateUrl: "information/templates/goods.html",
            controller: 'information.goods',
            permission: 'C4'//权限的id
        })

5.页面路由控制
<li class="nav-item" ng-class="{'router_checked':currentTab.search('backstage.concierge') >= 0}" ng-show="isPermission('C4')">
                <a class="route" ui-sref='backstage.concierge'>
                   管理员管理
                </a>
            </li>

转载于:https://www.cnblogs.com/hyhufei/p/7413261.html