angularjs 实现权限控制

原创于 2021-01-23 22:37:11 发布 · 388 阅读

CC 4.0 BY-SA版权

文章标签：

这篇博客展示了如何在AngularJS应用中实现授权检查（authChek）功能，并结合ui-router进行路由配置。代码导入了ocLazyLoad、ui-bootstrap等库，定义了一个全局方法用于检查用户权限。同时，应用中还包含了网络请求、服务、指令和控制器的使用，确保用户只有在具有相应权限的情况下才能访问特定功能。

1.app.js添加方法：（authChek）直接上代码

import angular from 'angular'
import 'oclazyload'
import uirouter from 'angular-ui-router'
import uiBootstrap from 'angular-ui-bootstrap'
import debounce from './static/scripts/factory/debounce.js'
import headerDev from './static/scripts/diredctive/headerDev.js'
import slidemenuDev from './static/scripts/diredctive/slidemenuDev.js'
import routing from './router.js' //路由
import indexCtrl from  './static/components/index/indexCtrl.js' //主页
import netWork from  './static/components/index/netWork.js' //网络
import commonService from  './static/service/commonService.js' //网络
window.app = angular.module('myProject',['uirouter','uiBootstrap','oclazyload'])
    .config(routing)
    .run(['$rootScope',function($rootScope,$http){
        $rootScope.$on('$stateChangeSuccess',function(event,toState){
            $rootScope.$broadcast('to-menu', {state: toState.name})
        })
    }])
    $rootScope.authChek =function(value) {
        if(window.authObject === undefined) return false
        return window.authObject[value] = 1;
        
    }
    $http({
        method: 'get',
        url: url,
        withCredentials:true
    }).then(res =>{
        let object={}
        res.data.forEach((item)=>{
            object[item.id] = 1;
        })
        window.authObject =  object;
    }.error=>{
        window.authObject = {};
    })
    .service('commonService',commonService)
    .directive('headerDev',headerDev)
    .directive('slidemenuDev',slidemenuDev)
    .controller('indexCtrl',indexCtrl)
    .controller('netWork',netWork)
    export default app

2.使用的时候如下

  <button ng-if='authChek(100)' ng-click='addJob()'>新建</button>