# 增加按钮权限控制 ## 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()`。