angularjs基于ionic框架开发移动端项目，怎么实现进去前台之前判断用户权限？
首先参考/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.jsvar 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>
angular JS 基于ionic框架 开发移动端项目 实现进入前台 判断用户权限 控制项目UI布局和tab的部门显示和隐藏
