YwxAppThink/addon/iot/view/backend/admin/acl.html

<div class="layui-container">
    <div class="admin-title">ACL 权限规则</div>
    <div class="layui-text" style="margin-bottom:10px;color:#999;">
        需在"服务设置"中开启 ACL 才生效。按 sort 升序匹配，命中第一条即决定放行/拒绝；
        主题支持通配符 <code>+ / #</code> 与占位符 <code>%u</code>(用户名) <code>%c</code>(clientId)。
    </div>
    <div class="layui-text" style="margin-bottom:10px;padding:8px 12px;background:#fff8e6;border-left:3px solid #ffb800;color:#8a6d3b;">
        <b>注意：本表管不到设备私有主题。</b>
        <code>/devices/{uuid}/...</code> 与 <code>/notify/{account}/...</code> 由服务端按<b>设备绑定与共享关系</b>硬校验
        （仅设备本体、设备主人、被共享者可访问；只读共享仅可订阅 state/status/event/config/ack/ota/report），
        <b>与"启用ACL"开关和默认策略无关</b>，未绑定的会员始终无法订阅他人设备。
        跨设备通配符（如 <code>/devices/+/state</code>）默认拒绝，如需给监控账号放行，在此为它单独加一条 <code>allow</code> 规则即可。
    </div>
    <div style="margin-bottom:10px;">
        <button class="layui-btn layui-btn-sm" onclick="editAcl()">+ 新增规则</button>
    </div>
    <table id="aclTable" lay-filter="aclTable"></table>
</div>

<!-- 行操作按钮模板 -->
<script type="text/html" id="barAcl">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script>
layui.use(['layer', 'jquery', 'form', 'table', 'http', 'ywxapp'], function(){
    var http = layui.http;
    var $ = layui.jquery, layer = layui.layer, table = layui.table;
    function esc(s){ return String(s==null?'':s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
    function reload(){ table.reload('aclTable'); }
    function ok(res, then){ if(res.code===0){ then(); } else { layer.msg(res.message||'操作失败'); } }

    // ================= 表格 =================
    table.render({
        elem: '#aclTable',
        url: '/iot/backend/aclTable',
        page: true,
        limit: 20,
        limits: [10, 20, 50, 100],
        parseData: function (res) {
            return {
                code: res.code,
                msg: res.message || res.msg || '',
                count: (res.data && res.data.count) || 0,
                data: (res.data && res.data.list) || []
            };
        },
        cols: [[
            { field: 'sort', title: 'sort', width: 70, align: 'center' },
            { field: 'target', title: '目标', minWidth: 130, templet: function (d) {
                    var t = {all:'全部', user:'用户名', client:'clientId'}[d.target_type] || d.target_type;
                    return d.target_type === 'all' ? t : esc(t + ':' + d.target);
                } },
            { field: 'topic', title: '主题过滤器', minWidth: 200 },
            { field: 'access', title: '权限', width: 110, align: 'center', templet: function (d) {
                    return d.access==1 ? '订阅' : (d.access==2 ? '发布' : '订阅+发布');
                } },
            { field: 'allow', title: '动作', width: 90, align: 'center', templet: function (d) {
                    return d.allow ? '<span class="layui-badge layui-bg-green">允许</span>' : '<span class="layui-badge">拒绝</span>';
                } },
            { field: 'remark', title: '备注', minWidth: 140 },
            { title: '操作', width: 150, align: 'center', toolbar: '#barAcl' }
        ]]
    });

    table.on('tool(aclTable)', function (obj) {
        if (obj.event === 'edit') { editAcl(obj.data); }
        else if (obj.event === 'del') { delAcl(obj.data.id); }
    });

    // ================= 新增 / 编辑 =================
    window.editAcl = function(row){
        row = row || {};
        var sel = function(name, val, opts){
            var s = '<select name="'+name+'">';
            opts.forEach(function(o){ s += '<option value="'+o[0]+'" '+(String(val)==String(o[0])?'selected':'')+'>'+o[1]+'</option>'; });
            return s + '</select>';
        };
        var html = '<form class="layui-form" style="padding:20px;" lay-filter="aclForm">'
          + '<input type="hidden" name="id" value="'+(row.id||'')+'">'
          + '<div class="layui-form-item"><label class="layui-form-label">目标类型</label><div class="layui-input-inline">'+sel('target_type', row.target_type||'all', [['all','全部'],['user','按用户名'],['client','按clientId']])+'</div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">目标值</label><div class="layui-input-inline"><input name="target" class="layui-input" value="'+esc(row.target)+'" placeholder="target_type=all 时留空"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">主题过滤器</label><div class="layui-input-inline"><input name="topic" class="layui-input" value="'+esc(row.topic)+'" placeholder="如 device/%c/# 或 sensor/+/temp"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">权限</label><div class="layui-input-inline">'+sel('access', row.access||3, [[1,'订阅'],[2,'发布'],[3,'订阅+发布']])+'</div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">动作</label><div class="layui-input-inline">'+sel('allow', (row.allow===undefined?1:row.allow), [[1,'允许'],[0,'拒绝']])+'</div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">排序</label><div class="layui-input-inline"><input name="sort" class="layui-input" value="'+(row.sort||0)+'"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">备注</label><div class="layui-input-inline"><input name="remark" class="layui-input" value="'+esc(row.remark)+'"></div></div>'
          + '</form>';
        layer.open({type:1, title:(row.id?'编辑':'新增')+'规则', area:['520px','auto'], content:html, btn:['保存','取消'],
            success:function(){ layui.form.render(); },
            yes:function(idx){
                var data = {};
                $('[lay-filter=aclForm]').serializeArray().forEach(function(i){ data[i.name]=i.value; });
                http.post('/iot/backend/saveAcl', data).then(function(res){
                    layer.msg(res.message||res.msg||'ok');
                    ok(res, function(){ layer.close(idx); setTimeout(reload, 600); });
                });
            }
        });
    };

    // ================= 删除 =================
    window.delAcl = function(id){
        layer.confirm('确认删除该规则？', function(idx){
            http.post('/iot/backend/deleteAcl', {id:id}).then(function(res){
                layer.msg(res.message||'已删除');
                setTimeout(reload, 600);
            });
            layer.close(idx);
        });
    };
});
</script>