ionic 移动端权限

权限概览

将底部导航栏tabs中的元素tab-item,和进入tab页签后的超链接作为授权的单位。

图片.png

实现思路

用户登录时,通过login服务查询用户权限(以json格式表示)。前台通过ng-if控制页面权限元素的展示。

后台代码

登录返回的权限数据格式 :

ifsuccess表示账号密码是否通过验证,modules表示用户权限数据,1表示有权,0表示无权限。

{    
    "ifsuccess":1,
    "modules":{
        "tabHome":1,
        "tabChat":1,
           "chat1":0,
           "chat2":1,
            "char3":1,  
     "tabSetting":1,
          "setting1":1,
           "setting2":0,
           "setting3":1,     
     "tabTest":0
        }
    }

控制器代码:

app.js 添加控制器

.state('tab',{
  ...
  controller:'tabCtrl'
})

controller.js 实现控制器,包括tabCtrl和LoginCtrl

.controller('tabCtrl',function($scope,config) {
  $scope.moudles = config.modules;
}
.controller('LoginCtrl',function($scope,localStorage,utilFun,Login,$state,config) {
     Login.LOGIN(params).then(function (response) { //Login.LOGIN方法实现在service.js
          console.log(response);          
          if (angular.isObject(response)) {
            var data = response.data;
            if (data.ifsuccess === 1) {
              loginInfo.remUser = $scope.loginInfo.remUser;
              loginInfo.remPass = $scope.loginInfo.remPass;
              config.USER = $scope.loginInfo.userName;
              config.PWD=$scope.loginInfo.userPass;
              if ($scope.loginInfo.remUser) {//记住用户名
                loginInfo.userName = $scope.loginInfo.userName;
              } else {
                loginInfo.userName = '';
              }
              if ($scope.loginInfo.remPass) {//记住密码
                loginInfo.userPass = $scope.loginInfo.userPass;
              } else {
                loginInfo.userPass = '';
              }
              loginInfo.host=$scope.loginInfo.host;
              localStorage.setObject('loginInfo', loginInfo);//存储用户登录信息
              //保存权限信息
              config.modules=data.modules;   
              //跳转到首页
              $state.go('tab.home');
           else  {//登录失败
              $scope.loginInfo.userPass = '';
              // toast.show("用户名或者密码错误", "center");
           }
    });  
}

前台控制展示

<ion-tab title="chat" href="#tab/chats" ng-if="module.tabChat ===1">
...
</ion-tab>

-----------------------------------------------------------------------------

That's all

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,666评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 13,956评论 0 15
  • 夏是狂热的, 家是遥远的, 若有人问我生活如何, 我是说不出的。 我说不出我的生活, 若有人问我生活如何, 夏是狂...
    枞阳徐少阅读 190评论 0 0
  • 人一定是会老的, 任何人都逃不过岁月的魔掌, 再有钱有势亦或者穷得一无所有, 都是如此公平的面对时光…… 所以,结...
    不贰小姐阅读 315评论 0 0