vue權限管理系統的實現代碼

來源：懂視網責編：小采時間：2020-11-27 22:01:59

vue權限管理系統的實現代碼

vue權限管理系統的實現代碼:后臺管理系統一般都會有權限模塊，用來控制用戶能訪問哪些頁面和哪些數據接口。大多數管理系統的頁面都長這樣。左邊為菜單，分為兩級，右邊為圖表顯示區域，有增刪改查的按鈕。表的結構 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0;

推薦度：

點擊下載本文 文檔為doc格式

導讀vue權限管理系統的實現代碼:后臺管理系統一般都會有權限模塊，用來控制用戶能訪問哪些頁面和哪些數據接口。大多數管理系統的頁面都長這樣。左邊為菜單，分為兩級，右邊為圖表顯示區域，有增刪改查的按鈕。表的結構 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0;

后臺管理系統一般都會有權限模塊，用來控制用戶能訪問哪些頁面和哪些數據接口。大多數管理系統的頁面都長這樣。

左邊為菜單，分為兩級，右邊為圖表顯示區域，有增刪改查的按鈕。

表的結構

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_auth_rule
-- ----------------------------
DROP TABLE IF EXISTS `t_auth_rule`;
CREATE TABLE `t_auth_rule` (
 `id_pk` bigint(20) NOT NULL AUTO_INCREMENT,
 `auth_id` varchar(128) NOT NULL COMMENT '權限Id',
 `pauth_id` varchar(128) DEFAULT NULL COMMENT '父級Id',
 `auth_name` varchar(255) NOT NULL COMMENT '權限名稱',
 `auth_icon` varchar(255) NOT NULL COMMENT '權限圖標',
 `auth_type` smallint(6) NOT NULL COMMENT '權限類型，BIT表示其屬性\r\n 0x00表示可顯示的菜單權限節點;\r\n 0x01表示普通節點',
 `auth_condition` text COMMENT '條件',
 `remark` varchar(255) DEFAULT NULL COMMENT '備注',
 `is_menu` smallint(255) DEFAULT '0' COMMENT '是否為菜單，0表示非，1表示是',
 `weight` int(11) NOT NULL DEFAULT '0' COMMENT '權重',
 `rule` varchar(256) DEFAULT NULL COMMENT '規則路徑主要對應菜單或方法的路徑名稱',
 `cr_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '創建時間',
 `up_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新時間',
 PRIMARY KEY (`id_pk`),
 UNIQUE KEY `AK_auth_id` (`auth_id`)
) ENGINE=InnoDB AUTO_INCREMENT=264 DEFAULT CHARSET=utf8 COMMENT='權限規則表，記錄權限相關的信息，權限以父子關系存在，菜單是權限的一種。';

SET FOREIGN_KEY_CHECKS = 1;


SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_role_auth
-- ----------------------------
DROP TABLE IF EXISTS `t_role_auth`;
CREATE TABLE `t_role_auth` (
 `id_pk` bigint(20) NOT NULL AUTO_INCREMENT,
 `role_id_fk` varchar(32) DEFAULT NULL COMMENT '角色id',
 `auth_id_fk` varchar(128) DEFAULT NULL COMMENT '權限id',
 `aa` varchar(255) DEFAULT NULL,
 PRIMARY KEY (`id_pk`)
) ENGINE=InnoDB AUTO_INCREMENT=77 DEFAULT CHARSET=utf8 COMMENT='角色與權限的關系表';

SET FOREIGN_KEY_CHECKS = 1;

對于菜單的權限，通過路由表匹配

addRouters(menuMap) {
 let routerArr = [];
 for (let j = 0; j < routerList.length; j++) {
 let obj;
 if (menuMap['AuthRule::' + routerList[j].path]) { // 找到一級菜單
 obj = {
 path: routerList[j].path,
 component: routerList[j].component,
 redirect: routerList[j].redirect,
 name: routerList[j].name,
 meta: routerList[j].meta,
 children: []
 };

 if (routerList[j].children.length) {
 for (let k = 0; k < routerList[j].children.length; k++) {
 let _fullpath = routerList[j].children[k].path
 if (routerList[j].children[k].meta) {
 _fullpath = routerList[j].children[k].meta.parentPath + '/' + _fullpath 
 }
 if (menuMap['AuthRule::' + _fullpath]) { // 找到二級菜單
 obj.children.push(routerList[j].children[k]);
 }
 }
 }
 }
 if (obj) {
 routerArr.push(obj);
 this.$router.options.routes.push(obj);
 }
 }

 storage.set("routerArr", routerArr);
 this.$router.addRoutes(routerArr);
 this.$router.push({ path: "/" });
},

menuMap為登錄時獲取的權限菜單，是一個對象； routerList為前端定義的路由表；遍歷routerList，如果routerList的key在menuMap里能找到的話，就表示該路由存在。最后生成一個過濾后的路由表，用vue提供的addRoutes方法動態添加到路由中，并把過濾后的路由表存到本地。

const menuMap = {
 '/dashboard': {path: '/dashboard', name: '首頁'}
}
const routerList = [
 {path: '/dashboard', name: '首頁', component: ..}
]

在頁面刷新的時候，從本地獲取路由表，添加到路由表中，代碼如下，constRouterArr為基礎路由表，比如登錄，404等

const routerList = storage.get('routerArr')
const routerArr = constRouterArr.concat(routerList);

對于按鈕的權限

if (res.data.auth_rule_map) {
 let obj = {}
 Object.keys(res.data.auth_rule_map).forEach(i => {
 // 將所有的按鈕放到一個obj里 key 為接口地址 
 if (res.data.auth_rule_map[i].is_menu === 0) { // 如果是按鈕
 obj[res.data.auth_rule_map[i].rule] = 1
 } 
 })
 storage.set("btnList", obj);
 storage.set("menuTree", res.data.auth_rule_map);
}

auth_rule_map為接口返回權限map，把按鈕的權限過濾出來存到本地。

將map添加到每個路由組件的data里，(這里有一個問題，怎么判斷一個組件是否是路由組件)，目前想到的是通過組件name來判斷，把所有的路由組件放到一個數組里做判斷。

在組件內部的按鈕上加上v-if，如果this.uri__里的uri在uriMap里存在就顯示。

也可以通過方法來判斷，如下面的__isBtnShow，不僅可以控制按鈕的顯示隱藏，還可以控制其樣式，比如顏色等，更加靈活，推薦使用方法來控制

uri = {
 ADD_MEMBER: '/api/add_member'
}

export default function install (Vue) {
 const uriMap = storage.get('btnList')
 //uriMap['/admin/api/auth_rule/update_auth_rule.action'] = 1
 Vue.mixin({
 created() {
 const arr = ['MemberManage', 'PayManage', '...']
 if (arr.indexOf(this.$options.name) !== -1) {
 this.dataUri__ = uriMap
 this.uri__ = uri 
 }
 },
 data() {
 return {
 dataUri__: {}
 }
 },
 })
}

<Button v-if="dataUri__[uri__.ADD_MEMBER]">添加會員</Button>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue權限管理系統的實現代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 權限管理

熱門焦點

vue權限管理系統的實現代碼

vue權限管理系統的實現代碼

vue權限管理系統的實現代碼

最新推薦

猜你喜歡

熱門推薦