angular JS 基于ionic框架 开发移动端项目 实现进入前台 判断用户权限 控制项目UI布局和tab的部门显示和隐藏

angularjs基于ionic框架开发移动端项目，怎么实现进去前台之前判断用户权限？

首先参考https://my.oschina.net/blogsh...这篇博客，再结合个人开发项目进行修改

具体想要实现 app的tab的5个部分根据权限控制显示4个，还是5个部分，第一反应是在要权限控制的tab上加上ng-if的条件判断，但是效果并不理想，判断没问题，主要是视图的渲染比逻辑要快，因此，并不理想。具体如下步骤：
1.在先自定义全局的用户权限model

services.js里面
/*自定义获取权限的model 并定义set和get方法*/
.factory('permissions', function ($rootScope) {
  var permissionList;
  return {
    setPermissions: function (permissions) {
      permissionList = permissions;
      $rootScope.$broadcast('permissionsChanged')
    },
    hasPermission: function () {
      return permissionList;
    }
  }
});

2 在Angular运行之前获取到permission的映射关系
Angular项目通过ng-app启动,但是一些情况下我们是希望Angular项目的启动在我们的控制之中.比如现在这种情况下,我就希望能获取到当前登录用户的所有permission映射关系后,再启动Angular的App.幸运的是Angular本身提供了这种方式,也就是angular.bootstrap().

app.js
var systecApp = angular.module('myApp', ['ionic', 'myApp.services']);

var permissionList;
/*获取用户权限数据*/
angular.element(document).ready(function() {
  $.post('/api/user/queryUserPhonePri', function(data) {
    permissionList = data.data;
    angular.bootstrap(document, ['myApp']);
  });
});
systecApp.run(function($ionicPlatform,$rootScope,$location,$timeout,$ionicHistory,$cordovaToast,permissions) {
  if(typeof (permissionList) == 'object'){
    permissions.setPermissions(permissionList);//这里就是给用户权限model permissions调用set方法赋值，方便以后使用
  }
....});

以上代码中$.post('/api/user/queryUserPhonePri', 进行网络请求获取用户权限，这里用$.get不行,这取决于后台请求是否允许时get请求。还需注意的是，这是是jQuery而不是Angular的$resource或者$http,因为在这个时候Angular还没有启动,它的function我们还无法使用.

3.编写属性指令

app.js里面

/*自定义--判断用户是否有权限的属性指令*/
systecApp.directive('hasPermission', function(permissions) {
  return {
    link: function(scope, element, attrs) {
      function toggleVisibilityBasedOnPermission() {
        var hasPermission = permissions.hasPermission();//这里是model的get方法获取用户权限信息
        if(typeof (hasPermission) == 'object'){
          var str = hasPermission.phoneConfPri +"";
          scope.$watch(attrs.hasPermission,function(value){
          //这里通过监听 凡是使用了该自定义指令的地方，都会把传进来的值value,进行下面的判断，控制使用该指令的标签element是否显示在UI页面上
            // console.log(hasPermission.phoneConfPri,value);
            if(str == value ){
              // console.log("显示");
              element.show();
            }else {
              // console.log("不显示");
              element.hide();
            }
          });
        }
      }
      toggleVisibilityBasedOnPermission();
      scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
    }
  };
});

4.使用

tabs.html上面写两套代码控制，如果只写一套，效果不出来。
<!--有电话会议的权限-->
<ion-tabs  class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide':$root.hideTabs}" hide-tabs="show" has-permission="0" >

          <!-- home Tab -->
          <ion-tab  title="会议" icon-off="iconfont ion-meet" icon-on="iconfont ion-meet" href="#/tab/home">
            <ion-nav-view name="home"></ion-nav-view>
          </ion-tab>

          <!-- reserve Tab -->
          <ion-tab title="预约" icon-off="iconfont icon-reserve" icon-on="iconfont icon-reserve" href="#/tab/reserve">
            <ion-nav-view name="reserve"></ion-nav-view>
          </ion-tab>

          <!-- template Tab -->
          <ion-tab title="一键开会" icon-off="iconfont icon-template" icon-on="iconfont icon-template" href="#/tab/template" style="">
            <ion-nav-view name="template"></ion-nav-view>
          </ion-tab>

          <!--phoneMeeting tab-->
          <ion-tab  title="电话会议" icon-off="iconfont icon-phone" icon-on="iconfont icon-phone" href="#/tab/phone">
            <ion-nav-view has-permission="1" name="phone"></ion-nav-view>
          </ion-tab>

          <!-- user Tab -->
          <ion-tab title="我的" icon-off="iconfont icon-user" icon-on="iconfont icon-user" href="#/tab/user">
            <ion-nav-view name="user"></ion-nav-view>
          </ion-tab>
</ion-tabs>

<!--没有电话会议的权限-->
<ion-tabs  class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide':$root.hideTabs}" hide-tabs="show" has-permission="1" >

      <!-- home Tab -->
      <ion-tab  title="会议" icon-off="iconfont ion-meet" icon-on="iconfont ion-meet" href="#/tab/home">
        <ion-nav-view name="home"></ion-nav-view>
      </ion-tab>

      <!-- reserve Tab -->
      <ion-tab title="预约" icon-off="iconfont icon-reserve" icon-on="iconfont icon-reserve" href="#/tab/reserve">
        <ion-nav-view name="reserve"></ion-nav-view>
      </ion-tab>

      <!-- template Tab -->
      <ion-tab title="一键开会" icon-off="iconfont icon-template" icon-on="iconfont icon-template" href="#/tab/template" style="">
        <ion-nav-view name="template"></ion-nav-view>
      </ion-tab>

      <!-- user Tab -->
      <ion-tab title="我的" icon-off="iconfont icon-user" icon-on="iconfont icon-user" href="#/tab/user">
        <ion-nav-view name="user"></ion-nav-view>
      </ion-tab>
</ion-tabs>