Vue + Element UI 實現(xiàn)權(quán)限管理系統(tǒng) 前端篇（十三）：頁面權(quán)限控制?
權(quán)限控制方案
既然是后臺權(quán)限管理系統(tǒng)，當(dāng)然少不了權(quán)限控制啦，至于權(quán)限控制，前端方面當(dāng)然就是對頁面資源的訪問和操作控制啦。
前端資源權(quán)限主要又分為兩個部分，即導(dǎo)航菜單的查看權(quán)限和頁面增刪改操作按鈕的操作權(quán)限。
我們的設(shè)計把頁面導(dǎo)航菜單和頁面操作按鈕統(tǒng)一存儲在菜單數(shù)據(jù)庫表中，菜單表中包含以下權(quán)限關(guān)注點。
菜單類型
菜單類型代碼頁面資源的類型。類型包括，0：目錄? ?1：菜單? ?2：按鈕'。
權(quán)限標(biāo)識
權(quán)限標(biāo)識即是代表此頁面資源，用來進行權(quán)限控制的唯一標(biāo)識，主要是進行增刪改查的權(quán)限控制。
權(quán)限標(biāo)識包括，sys:user:add：新增 sys:user:edit：編輯 sys:user:delete：刪除?sys:user:view：查看。
注：目前查看都可以通過菜單可見性進行控制，所以查看權(quán)限標(biāo)識目前沒有用上，如果需要顯示無權(quán)限頁面可以使用。
菜單表結(jié)構(gòu)
具體的菜單表結(jié)構(gòu)如下。
-- ------------------------------------------------ -- 菜單 -- ------------------------------------------------ -- Table structure for `sys_menu` -- ------------------------------------------------ CREATE TABLE `sys_menu` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '編號', `name` varchar(50) COMMENT '菜單名稱', `parent_id` bigint COMMENT '父菜單ID，一級菜單為0', `url` varchar(200) COMMENT '菜單URL', `perms` varchar(500) COMMENT '授權(quán)(多個用逗號分隔，如：sys:user:add,sys:user:edit)', `type` int COMMENT '類型 0：目錄 1：菜單 2：按鈕', `icon` varchar(50) COMMENT '菜單圖標(biāo)', `order_num` int COMMENT '排序', `create_by` varchar(50) COMMENT '創(chuàng)建人', `create_time` datetime COMMENT '創(chuàng)建時間', `last_update_by` varchar(50) COMMENT '更新人', `last_update_time` datetime COMMENT '更新時間', `del_flag` tinyint DEFAULT 0 COMMENT '是否刪除 -1：已刪除 0：正常', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='菜單管理';
導(dǎo)航菜單實現(xiàn)思路
1.用戶登錄系統(tǒng)
用戶登錄系統(tǒng)之后，跳轉(zhuǎn)到首頁。
2.根據(jù)用戶加載導(dǎo)航菜單
在路由導(dǎo)航守衛(wèi)路由時加載用戶導(dǎo)航菜單并存儲到store。
加載過程如下，返回結(jié)果排除按鈕類型。
user -> user_role -> role -> role_menu -> menu。
3.導(dǎo)航欄讀取菜單樹
導(dǎo)航欄到sotre讀取導(dǎo)航樹并進行展示。?
頁面按鈕實現(xiàn)思路
1.用戶登錄系統(tǒng)
用戶登錄系統(tǒng)之后，跳轉(zhuǎn)到首頁。
2.根據(jù)用戶加載權(quán)限標(biāo)識集合
在路由導(dǎo)航守衛(wèi)路由時加載用戶權(quán)限標(biāo)識集合。
加載過程如下，返回結(jié)果是用戶權(quán)限標(biāo)識的集合。
user -> user_role -> role -> role_menu -> menu。
3.頁面按鈕控制
頁面操作按鈕提供權(quán)限標(biāo)識，查詢是否在用戶權(quán)限標(biāo)識集合中。
在：有權(quán)限，可見或可用，不在：無權(quán)限，不可見或禁用。
目前本系統(tǒng)采用的是狀態(tài)禁用。
權(quán)限控制實現(xiàn)
導(dǎo)航菜單權(quán)限
加載導(dǎo)航菜單
如下圖所示，在導(dǎo)航守衛(wèi)路由時加載導(dǎo)航菜單并保存狀態(tài)。
router/index.js
頁面組件引用
導(dǎo)航欄頁面從共享狀態(tài)中讀取導(dǎo)航菜單樹并展示。
views/NavBar/NavBar.vue
views/NavBar/NavBar.vue
頁面按鈕權(quán)限
添加權(quán)限獲取接口
http/modules/user.js
// 查找用戶的菜單權(quán)限標(biāo)識集合
export const findPermissions = (params) => {
return axios({
url: '/user/findPermissions',
method: 'get',
params
})
}
添加權(quán)限獲取接口
store/modules/user.js
export default {
state: {
perms: [], // 用戶權(quán)限標(biāo)識集合
},
getters: {
},
mutations: {
setPerms(state, perms){ // 用戶權(quán)限標(biāo)識集合
state.perms = perms;
}
},
actions: {
}
}
加載權(quán)限標(biāo)識
如下圖所示，在導(dǎo)航守衛(wèi)路由時加載權(quán)限標(biāo)識并保存狀態(tài)。
router/index.js
權(quán)限按鈕判斷
封裝了權(quán)限操作按鈕組件，在組件中根據(jù)外部傳入的權(quán)限標(biāo)識進行權(quán)限判斷。
views/Core/KtButton.vue
<template>
<el-button :size="size" :type="type"
:loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">
{{label}}
</el-button>
</template>
<script>
import { hasPermission } from '@/permission/index.js'
export default {
name: 'KtButton',
props: {
label: { // 按鈕顯示文本
type: String,
default: 'Button'
},
size: { // 按鈕尺寸
type: String,
default: 'mini'
},
type: { // 按鈕類型
type: String,
default: null
},
loading: { // 按鈕加載標(biāo)識
type: Boolean,
default: false
},
disabled: { // 按鈕是否禁用
type: Boolean,
default: false
},
perms: { // 按鈕權(quán)限標(biāo)識，外部使用者傳入
type: String,
default: null
}
},
data() {
return {
}
},
methods: {
handleClick: function () {
// 按鈕操作處理函數(shù)
this.$emit('click', {})
},
hasPerms: function (perms) {
// 根據(jù)權(quán)限標(biāo)識和外部指示狀態(tài)進行權(quán)限判斷
return hasPermission(perms) & !this.disabled
}
},
mounted() {
}
}
</script>
<style scoped>
</style>
權(quán)限判斷邏輯
src/permission/index.js
import store from '@/store'
/**
* 判斷用戶是否擁有操作權(quán)限
* 根據(jù)傳入的權(quán)限標(biāo)識，查看是否存在用戶權(quán)限標(biāo)識集合
* @param perms
*/
export function hasPermission (perms) {
let hasPermission = false
let permissions = store.state.user.perms
for(let i=0, len=permissions.length; i<len; i++) {
if(permissions[i] === perms) {
hasPermission = true;
break
}
}
return hasPermission
}
權(quán)限按鈕引用
views/Sys/User.vue
測試效果
1.可用狀態(tài)，操作按鈕可用。
2.修改頁面的權(quán)限標(biāo)識，導(dǎo)致認(rèn)證失敗。
如下圖所示，修改新增和刪除按鈕的權(quán)限標(biāo)識（加個2），導(dǎo)致權(quán)限認(rèn)證失敗。
3.無權(quán)限，操作按鈕禁用。
新增和刪除按鈕因為修改了權(quán)限標(biāo)識，匹配失敗，變成了禁用狀態(tài)。
文章來源：http://www.zghlxwxcb.cn/news/detail-823453.html
源碼下載
后端：kitty: 基于Spring Boot、Spring Cloud、Vue.js 、Element UI實現(xiàn)，采用前后端分離架構(gòu)的權(quán)限管理系統(tǒng)，JAVA快速開發(fā)平臺。文章來源地址http://www.zghlxwxcb.cn/news/detail-823453.html
到了這里，關(guān)于Vue + Element UI 前端篇（十三）：頁面權(quán)限控制的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
