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