前端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;
});