/** * 为按钮添加权限 * @author hpf * @since 2019-03-25 */ var Ajax={ get: function(url, fn) { // XMLHttpRequest对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { // readyState == 4说明请求已完成 if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // 从服务器获得数据 fn.call(this, xhr.responseText); } }; xhr.send(); }, // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式 post: function (url, data, fn) { var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); // 添加http头，发送信息至服务器时内容编码类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { fn.call(this, xhr.responseText); } }; xhr.send(data); } } function linksFactory(apilist, fn) { var links = {}; linkNum = 0; if (!(apilist instanceof Array)) { return '../' } apilist.map(function (v, i, a) { var _arr = v.url.split('/'); var _name = _arr[_arr.length - 1]; _name = _name.split('?')[0]; if (links[_name] !== undefined) { _name = _name + linkNum++; } links[_name] = { url: function () { var me =this; if (me.res_power=="true") { creatStyle(me.param); return me.api; } else { if (typeof fn === 'function') { fn(me); } return '../'; } }, api: v.url, param: v.param, res_power: true } }); for (var k in links) { (function (key) { Ajax.get('/sys/buttonAssign/isPermission/'+links[key].param,function(_res){ var res=JSON.parse(_res); links[key].res_power=res.result; if(links[key].api=='button'){ links[key].url(); } }) })(k); } return links; } function creatStyle(p){ var style='<style>[assign-url="'+p+'"]{display:initial;}</style>'; var ele=document.createElement('div'); ele.innerHTML=style; document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild) }
$.post(requestPower.getAssignList.url(),param, function(data){ var menuDetail= $.parseJSON(data.menuList); $.fn.zTree.init($("#menuTree"), setting, menuDetail); var userDetail= $.parseJSON(data.userList); userDetail.forEach(function(item){ if(item.flag == '1' && item.pId != "DROOT"){ item.iconSkin = "sec"; } else if(item.flag == '2'){ item.iconSkin = "user"; } }); $.fn.zTree.init($("#userTree"), setting, userDetail); processHeight(); });
var requestPower=linksFactory( [ //{url:path+"/sys/roleAssign/assignMenu",param:"roleAssign:permission:arrange"}, //{url:"assignMenu",param:"roleAssign:permission:buttonArrange"}, {url:path+"/sys/roleAssign/assignMenu",param:"roleAssign:permission:arrange"}, {url:"getAssignList",param:"roleAssign:permission:buttonArrange"}, ],function(me){ console.log(me); alert("没有权限"); } ) requestPower.assignMenu.url() requestPower.getAssignList.url()
自己修改的版本
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>测试按钮权限</title> <style type="text/css"> button{display:none} </style> </head> <body> <div id="tbl" class="scroll-tbl"> <button assign-url="code1">权限按钮1</button> <button assign-url="code2">权限按钮2</button> </div> <script type="text/javascript"> var Ajax={ get: function(url, fn) { // XMLHttpRequest对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { // readyState == 4说明请求已完成 if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // 从服务器获得数据 fn.call(this, xhr.responseText); } }; xhr.send(); }, // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式 post: function (url, data, fn) { var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); // 添加http头，发送信息至服务器时内容编码类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { fn.call(this, xhr.responseText); } }; xhr.send(data); } } function linksFactory(apilist, fn) { var links = {}; linkNum = 0; if (!(apilist instanceof Array)) { return '../' } apilist.map(function (v, i, a) { var _arr = v.url.split('/'); var _name = _arr[_arr.length - 1]; _name = _name.split('?')[0]; if (links[_name] !== undefined) { _name = _name + linkNum++; } links[_name] = { url: function () { var me =this; if (me.res_power=="true") { creatStyle(me.param); return me.api; } else { if (typeof fn === 'function') { fn(me); } return '../'; } }, api: v.url, param: v.param, res_power: true } }); var buttonAssign={ url1:"false", url2:'true' } for (var k in links) { (function (key) { /* Ajax.get('/sys/buttonAssign/isPermission/'+links[key].param,function(_res){ var res=JSON.parse(_res); links[key].res_power=res.result; if(links[key].api=='button'){ links[key].url(); } }) */ links[key].res_power=buttonAssign[key]; if(buttonAssign[key]=="true"){ creatStyle(links[key].param); } })(k); } console.log(links); return links; } function creatStyle(p){ var style='<style>[assign-url="'+p+'"]{display:initial;}</style>'; var ele=document.createElement('div'); ele.innerHTML=style; document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild) } </script> <script type="text/javascript"> var requestPower=linksFactory( [ {url:"url1",param:"code1"}, {url:"url2",param:"code2"}, ],function(me){ console.log(me); alert("没有权限"); } ) </script> </body> </html>
最终版本
使用方法：
1、在页面的加载之前定义一个变量，例如
var urlList=["user:permission:add","user:permission:update","user:permission:delete"];
2、在页面中找对对应的需要控制权限的按钮，在按钮上面添加一个属性assign-url="user:permission:add"，例如 新增时
<button type="button" class="but-green-90" id="userAddBtn" assign-url="user:permission:add"> <span class="img-add"> </span> <span class="img-text"><spring:message code="syst.addBtn"></spring:message></span> </button>
3、引入js文件
<script src='${ctx}/ui/common/js/functionality/publicRoleAssignnew.js'></script>
js代码：
/** * 为按钮添加权限 * @author hpf * @since 2019-03-25 */ var assignObj={}; var Ajax={}; var assignFlag=false; initAjax();//自定义ajax的方法 //var el=document.querySelectorAll("button[assign-url]"); for(var i=0;i<urlList.length;i++){ //isHasAssign(el[i].getAttribute("assign-url")); isHasAssign(urlList[i]); } //防止dom没有加载完就设置样式导致报错误 if(document.addEventListener) { document.addEventListener('DOMContentLoaded', function() { assignFlag=true; document.removeEventListener('DOMContentLoaded',arguments.callee, false); }, false); } function isHasAssign(str){ Ajax.get('/sys/buttonAssign/isPermission/'+str,function(data){ var _data=JSON.parse(data); if(_data.result=="true"){ assignObj[str]="true" //将按钮的样式显示出来 creatcss(str); }else{ assignObj[str]="false" } }); } function initAjax(){ Ajax={ get: function(url, fn) { // XMLHttpRequest对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { // readyState == 4说明请求已完成 if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // 从服务器获得数据 fn.call(this, xhr.responseText); } }; xhr.send(); }, // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式 post: function (url, data, fn) { var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); // 添加http头，发送信息至服务器时内容编码类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { fn.call(this, xhr.responseText); } }; xhr.send(data); } } } function creatcss(str){ if(str===undefined){return} setTimeout(function(){ if(assignFlag){ var btnArr=document.querySelectorAll("[assign-url='"+str+"']") btnArr[0].removeAttribute("assign-url"); }else{ setTimeout(arguments.callee,60) } },60); }
需要某一个页面中的按钮添加权限时，就应该在权限管理里面，在菜单下面赋予这个按钮权限，页面中就能调用接口请求判断按钮是否有这个权限