Core + Vue 后臺(tái)管理基礎(chǔ)框架4——前端授權(quán)

1、前言


　　上篇，我們講了后端的授權(quán)。與后端不同，前端主要是通過(guò)功能入口如菜單、按鈕的顯隱來(lái)控制授權(quán)的。具體來(lái)講，就是根據(jù)指定用戶的制定權(quán)限來(lái)加載對(duì)應(yīng)側(cè)邊欄菜單和頁(yè)面內(nèi)的功能按鈕。我們一個(gè)個(gè)來(lái)講。

2、側(cè)邊欄菜單


　　鑒于本項(xiàng)目使用了vue-router，那顯然，側(cè)邊欄就會(huì)跟對(duì)應(yīng)路由關(guān)聯(lián)，同時(shí)，前端項(xiàng)目會(huì)注冊(cè)路由導(dǎo)航事件，此事件見src根目錄下permission.js：



?

?

?　　截圖中，上邊的紅框代表是在注冊(cè)路由跳轉(zhuǎn)前回調(diào)鉤子，此鉤子可以根據(jù)具體情況決定是否需要導(dǎo)航到目的路由或?qū)Ш降狡渌酚?。下邊的紅框先調(diào)用menu
store中的獲取側(cè)邊欄action，從后端拿到本用戶具有權(quán)限的側(cè)邊欄菜單：



?

?


?　　從后端拿到側(cè)邊欄菜單json，前端是沒辦法直接使用的，一堆json對(duì)象或者字符串，與Vue路由、視圖并沒法兒無(wú)縫銜接，所以上邊我們看到調(diào)用了travseRoutes方法，此方法在前端工具類route.js中，如下：



?

?

?　　主要用意就是經(jīng)由后端動(dòng)態(tài)菜單配置前端vue-router動(dòng)態(tài)路由，用到了vue-router中路由懶加載這個(gè)重要的特性。以上就是前端動(dòng)態(tài)側(cè)邊欄的實(shí)現(xiàn)。

3、功能按鈕

　　大部分項(xiàng)目都做到了菜單級(jí)的權(quán)限控制，但做到頁(yè)面級(jí)別的，倒是不多。畢竟他該多，而且也是要費(fèi)點(diǎn)兒功夫的。那這里我們就來(lái)看看前端是如何實(shí)現(xiàn)按鈕級(jí)權(quán)限控制的。


　　一般而言，組件顯隱可以通過(guò)v-show或v-if，但若通過(guò)這種方式，恐怕得在viewmodel中定義大量屬性，最好的情況，也得在需要控制的地方頂一個(gè)計(jì)算屬性吧，這種方式恐怕代價(jià)還是有一些的。針對(duì)這點(diǎn)，web-flash前端項(xiàng)目中，很巧妙地用到了自定義Vue指令這個(gè)特性，將按鈕的加載與去除邏輯封裝了起來(lái)，具體在前端項(xiàng)目src/directive/permission.js中：

import store from '@/store' export default{ inserted(el, binding, vnode) {
const { value }= binding const permissions = store.getters &&
store.getters.permissionsif (value && value instanceof Array && value.length > 0
) { const permissionRoles= value const hasPermission =
permissions.some(permission => { return permissionRoles.includes(permission) })
if (!hasPermission) { el.parentNode && el.parentNode.removeChild(el) } } else {
throw new Error(`need roles! Like v-permission="['admin','editor']"`) } } }

　　自定義指令有幾種類型鉤子函數(shù)，這里選取了inserted，代表是在元素插入后判斷有無(wú)指定按鈕權(quán)限，如果沒有，則從界面再移除。接下來(lái)，我們就實(shí)際看看效果。首先，在用戶管理對(duì)應(yīng)的視圖js中引入自定義指令：

?

?

?　　然后，我們?cè)谟脩粢晥D文件中對(duì)新增、編輯、刪除用戶幾個(gè)按鈕用自定義指令做權(quán)限控制：
<el-col :span="24"> <el-button type="success" size="mini" icon="el-icon-plus"
@click.native="add" v-permission="['/mgr/add']"> {{$t('button.add') }} </
el-button> <el-button type="primary" size="mini" icon="el-icon-edit"
@click.native="edit" v-permission="['/mgr/edit']"> {{$t('button.edit') }} </
el-button> <el-button type="danger" size="mini" icon="el-icon-delete"
@click.native="remove" v-permission="['/mgr/delete']"> {{$t('button.delete') }}
</el-button> <el-button type="info" size="mini" icon="el-icon-role"
@click.native="openRole">角色分配</el-button> </el-col> </el-row>
　　之后，我們用一個(gè)不具有用增刪改權(quán)限的用戶登錄系統(tǒng)：

?

?

?　　可以看到，添加、修改、刪除用戶菜單是不可見的。那現(xiàn)在我把添加按鈕的v-permission指令拿掉，則再看效果：



?

?　　可見，拿掉v-perission，添加用戶按鈕顯示出來(lái)了，反面說(shuō)明前端授權(quán)生效了。

?

• ? 上一篇：.net core 反射的介紹與使用
• ? 下一篇：使用EventBus + Redis發(fā)布訂閱模式提升業(yè)務(wù)執(zhí)行性能