前端auth权限验证

为什么前端也做权限认证，权限认证不应该是后端做的吗？
这里的权限认证指的是前端判断是否有权限查看的数据（例如：添加、删除、编辑之类的按钮），这些只有在点击到对应的url之后，后端才会进行权限认证。
为了避免用户困扰，可以在此用上前端的权限认证，判断是否显示还是隐藏

视图页面内权限例子

• 第一种示例, 通过php的auth()方法生成layui-hide样式属性。

<button class="layui-btn layui-btn-normal layui-btn-sm {if !auth('system.menu/add')}layui-hide{/if}" data-open="system.menu/add" data-title="添加" data-full="true"><i class="fa fa-plus"></i> 添加</button>

• 第二种, 通过php的auth()方法判断, 是否显示html

{if !auth('system.menu/add')}
<button class="layui-btn layui-btn-normal layui-btn-sm" data-open="system.menu/add" data-title="添加" data-full="true"><i class="fa fa-plus"></i> 添加</button>
{/if}

table表格内权限例子

• table表格里面，一种table表格上方的操作栏toolbar需要权限判断是否显示。
• 另外一种是table表格里面的列操作栏operat也需要权限判断是否显示。

事先定义权限规则

• 需要在对应的表格的dom事先全好对应的权限规则。
• 权限规则为：data-auth- + 规则名
• 例如：data-auth-add=”{:auth(‘goods.cate/add’)}”, add就是对应的权限规则。

下方例子中共定义了：add edit delete stock 四种权限规则

<div class="layuimini-container">
    <div class="layuimini-main">
        <table id="currentTable" class="layui-table layui-hide"
               data-auth-add="{:auth('mall.goods/add')}"
               data-auth-edit="{:auth('mall.goods/edit')}"
               data-auth-delete="{:auth('mall.goods/delete')}"
               data-auth-stock="{:auth('mall.goods/stock')}"
               lay-filter="currentTable">
        </table>
    </div>
</div>

表格上方的toolbar权限验证

下面简单讲解权限验证，完整的toolbar的使用和配置请查看table模块。

• toolbar内置三个内置权限验证：add,delete,export

toolbar: ['refresh','add', 'delete', 'export']

• 自定义toolbar, 在auth属性上填写权限规则

toolbar: ['refresh',
      [{
         text: ' 添加',
         open: init.add_url,
         class: 'layui-btn layui-btn-normal layui-btn-sm',
         icon: 'fa fa-plus ',
         title: '添加',
         auth: 'add',
         extend: ' data-full="true"',
       }],
      'delete', 'export'],

表格内列操作operat的权限验证

• operat内置三个内置权限验证：edit,delete

operat: ['edit', 'delete']

• 自定义operat, 在auth属性上填写权限规则

operat: [
     [{
        class: 'layui-btn layui-btn-xs layui-btn-success',
        method: 'open',
        text: '编辑',
        auth: 'edit',
        url: init.edit_url,
        extend: 'data-full="true"',
      }, {
        class: 'layui-btn layui-btn-xs layui-btn-normal',
        method: 'open',
        text: '入库',
        auth: 'stock',
        url: init.stock_url,
        extend: '',
    }],
      'delete']

完整例子

define(["jquery", "easy-admin"], function ($, ea) {

    var init = {
        table_elem: '#currentTable',
        table_render_id: 'currentTableRenderId',
        index_url: 'mall.goods/index',
        add_url: 'mall.goods/add',
        edit_url: 'mall.goods/edit',
        del_url: 'mall.goods/del',
        export_url: 'mall.goods/export',
        modify_url: 'mall.goods/modify',
        stock_url: 'mall.goods/stock',
    };

    var Controller = {

        index: function () {
            ea.table.render({
                init: init,
                modifyReload: true,
                toolbar: ['refresh',
                    [{
                        text: ' 添加',
                        open: init.add_url,
                        class: 'layui-btn layui-btn-normal layui-btn-sm',
                        icon: 'fa fa-plus ',
                        title: '添加',
                        auth: 'add',
                        extend: ' data-full="true"',
                    }],
                    'delete', 'export'],
                cols: [[
                    {type: "checkbox"},
                    {field: 'id', width: 80, title: 'ID'},
                    {field: 'sort', width: 80, title: '排序', edit: 'text'},
                    {field: 'cate.title', minWidth: 80, title: '商品分类'},
                    {field: 'title', minWidth: 80, title: '商品名称'},
                    {field: 'logo', minWidth: 80, title: '分类图片', search: false, templet: ea.table.image},
                    {field: 'market_price', width: 100, title: '市场价', templet: ea.table.price},
                    {field: 'discount_price', width: 100, title: '折扣价', templet: ea.table.price},
                    {field: 'total_stock', width: 100, title: '库存统计'},
                    {field: 'stock', width: 100, title: '剩余库存'},
                    {field: 'virtual_sales', width: 100, title: '虚拟销量'},
                    {field: 'sales', width: 80, title: '销量'},
                    {field: 'status', title: '状态', width: 85, selectList: {0: '禁用', 1: '启用'}, templet: ea.table.switch},
                    {field: 'create_time', minWidth: 80, title: '创建时间', search: 'range'},
                    {
                        width: 250,
                        title: '操作',
                        templet: ea.table.tool,
                        operat: [
                            [{
                                class: 'layui-btn layui-btn-xs layui-btn-success',
                                method: 'open',
                                text: '编辑',
                                auth: 'edit',
                                url: init.edit_url,
                                extend: 'data-full="true"',
                            }, {
                                class: 'layui-btn layui-btn-xs layui-btn-normal',
                                method: 'open',
                                text: '入库',
                                auth: 'stock',
                                url: init.stock_url,
                                extend: '',
                            }],
                            'delete']
                    }
                ]],
            });

            ea.listen();
        },
        add: function () {
            ea.listen();
        },
        edit: function () {
            ea.listen();
        },
        stock: function () {
            ea.listen();
        },
    };
    return Controller;
});