vue 後台系統許可權管理

最近在做乙個後台管理系統，一般的後台系統都有許可權管理這塊，下面我就分享下我實現許可權管理這塊的思路。

首先說下這個系統前端用到的技術棧，vue全家桶,element-ui,axios。首先，使用者的許可權是通過前端來進行配置的，那麼就需要乙個頁面去進行使用者的許可權配置。在使用者登入之後，通過請求後台查詢該使用者的許可權資訊，然後返回到前端。前端拿到許可權資訊之後，動態配置路由，再生成出對應的選單列表。

毋庸置疑，許可權是跟使用者掛鉤的。在使用者管理頁面，做乙個授權頁面。如下圖：

樹結構用的是element-ui裡面的樹形控制項。生成這個樹形選單的資料來源為前端配置好的預設的路由表。'icon'為選單對應的圖表，'index'為自定義的索引，用來配合這個樹形控制項生成許可權資訊。

export const homeroute = ;
export const routes = [
, ,]
}, ];複製**

首頁預設是所有使用者都能檢視的。當為改使用者勾選對應的選單後，則會生成乙個陣列，儲存著選中的選單列表，如:['1', '2-1', '3', '2', '2-2']。

我在main.js檔案做了如下配置：

var per = true;
router.beforeeach((to, from, next) =>  else );
} else 
} else 
}  next();
});複製**

當頁面每次重新整理的時候(ps:定義per變數，就是為了防止每次進重新整理的時候去dispatch,而是在頁面重新整理的時候去觸發),去dispatch.狀態管理的**如下。首先拿到使用者許可權陣列，然後分成一級選單跟二級選單兩個陣列。對一級選單和預設的路由表進行遍歷，篩選出有許可權的路由表，再過濾掉一級路由裡沒有許可權的二級路由。

const state = ;
const getters = ;
const getters = ;
const actions = ) 
child.map(c => );
console.log(child);
let newparent = [...new set(oldparent)]; // 去重
let routeslist = [...new set(routes)]; // 去重
let parentarray = ;
// 生成一級選單
newparent.map(
item => , routesitem);
parentarray.push(it);}}
);}
);// 過濾掉一級選單下的二級選單
for (let pitem of parentarray) 
homeroute.children = parentarray;
router.addroutes([homeroute]);
commit(types.perm_list, parentarray);
resolve(perm);
});});
}};const mutations = 
};複製**

例如，當獲取到的使用者許可權為：['1', '2-1', '3']，那麼生成的路由為：

, 
]}, 
複製**

路由陣列都出來了，那麼生成選單就不在話下了。選單也是用到了element-ui的選單

"sidebar">
"sidebar-el-menu" :default-active="onroutes" :collapse="collapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
"item in permlist">
"item.children">
"item.path" :key="item.path">
"title">
"item.icon">
"title">}
"subitem in item.children">
"subitem.children" :index="subitem.path" :key="subitem.path">
"title">}
"(threeitem,i) in subitem.children" :key="i" :index="threeitem.path">
}"subitem.path" :key="subitem.path">
}"item.path" :key="item.path">
"item.icon">
"title">}
複製**

生成的選單如下：

我在網上查閱到的後台許可權管理，都是跟角色掛鉤的，無法滿足我的需求，於是在反覆思考下想到了這樣的做法，有些不足的地方還需要繼續補充和完善。例如：目前在選單級別上，只是做了一二級選單，沒有**選單。在狀態管理生成新的路由的**片段感覺寫的有點繁瑣，有待優化。希望大家能提出意見。

vue 後台系統許可權管理

Vue後台許可權管理

Vue後台管理系統的按鈕許可權控制

vue後台管理系統許可權控制思考與實踐

vue 後台系統許可權管理

Vue後台許可權管理

Vue後台管理系統的按鈕許可權控制

vue後台管理系統許可權控制思考與實踐

相關推薦