auth权限验证

前端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](https://www.yuque.com/u831648/gy4289/dzhes0) 模块。

• 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;
});