# 增加按鈕權限控制 ## 9.3.增加按鈕權限控制 iframe版一般是用前后端不分離，后端可以控制按鈕權限的，如果想要在前端控制按鈕權限， 可以在common.js增加`hasPerm`和`renderPerm`方法： ~~~ layui.config({ base: getProjectUrl() + 'assets/module/' }).extend({ }).use(['layer', 'admin'], function () { var $ = layui.jquery; var admin = layui.admin; // 權限列表，這里也可以從緩存中取，比如登錄后把用戶權限放在緩存里面 admin.authList = ['user:add', 'user:del']; /** 判斷是否有權限 */ admin.hasPerm = function (p) { if (admin.authList) for (var i = 0; i < admin.authList.length; i++) if (p == admin.authList[i]) return true; return false; }; /** 移除沒有權限的元素 */ admin.renderPerm = function () { $('[perm-show]').each(function () { if (!admin.hasPerm($(this).attr('perm-show'))) $(this).remove(); }); }; admin.renderPerm(); // 頁面載入就檢查按鈕權限 }); ~~~ 然后就可以在html中加屬性控制了： ~~~ <a class="layui-btn" perm-show="user:add">添加用戶</a> <a class="layui-btn" perm-show="user:edit">修改用戶</a> ~~~ 如果把權限列表`authList`改成ajax獲取，應該這樣寫： ~~~ layui.config({ }).extend({ }).use(['layer', 'admin'], function () { var $ = layui.jquery; var admin = layui.admin; admin.authList = undefined; // 權限列表，這里初始不賦值 admin.hasPerm = function (p) {}; // 同上這里省略 admin.renderPerm = function () { if(admin.authList === undefined) return; // 這里要加這個 $('[perm-show]').each(function () { if (!admin.hasPerm($(this).attr('perm-show'))) $(this).remove(); }); }; /** 獲取用戶權限 */ admin.req('user/auth/list', function(res){ admin.authList = res.data; admin.renderPerm(); // 要在請求完成后再檢查頁面上按鈕權限 }); }); ~~~ 返回的json示例： ~~~ { "code": 200, "data": [ "user:add", "user:edit", "user:del" ] } ~~~ 如果頁面上按鈕是動態渲染的，要重新調用`renderPerm`方法，比如數據表格中的按鈕應該在done里面加： ~~~ table.render({ elem: '#userTable', url: '../../json/user.json', toolbar: ['<div>', '<button perm-show="user:add" lay-event="add" class="layui-btn">添加</button>', '<button perm-show="user:del" lay-event="del" class="layui-btn">刪除</button>', '</div>'].join(''), cols: [[ {type: 'numbers'}, {field: 'username', title: '賬號', sort: true}, {field: 'nickName', title: '用戶名', sort: true}, {title: '操作', toolbar: '#userTbBar'} ]], done: function() { admin.renderPerm(); } }); ~~~ 上面是把方法定義在admin模塊下面，也可以定義在layui或window下面，`layui.renderPerm = function () {}`， 調用方法也要改成`layui.renderPerm()`。