权限控制是中后台系统中常见的需求之一
控制粒度
1.目录和路由级别的控制
2.按钮级别的控制
目录和路由级别的控制
目录级别
// menulist
export const menulist = [
{
id: "20010",
name: "systemmanagement",
text: "系统管理",
icon: "android-settings",
children: [
{
id: "20010001",
name: "rolemanagement",
text: "角色权限管理",
url: "/homeMain/systemmanagement/rolemanagement"
},
{
id: "20010002",
name: "management",
text: "人员管理",
url: "/homeMain/systemmanagement/personelManage"
}
]
},
{
id: "20017",
name: "suppliermanagement",
text: '供应商管理"',
icon: "android-settings",
children: [
{
id: "20017001",
name: "supplierList",
text: '供应商管理"',
url: "/homeMain/supplier/list"
}
]
},
{
id: "20016",
name: "mdse",
text: "自营商品管理",
icon: "social-buffer",
children: [
{
id: "20016001",
name: "storegoods",
text: "供应商品管理",
url: "/homeMain/mdse/storegoods"
},
{
id: "20016002",
name: "storeClass",
text: "后台类目管理",
url: "/homeMain/mdse/storeClass"
}
]
},
{
id: "20005",
name: "transacts",
text: "交易管理",
icon: "social-usd",
children: [
{
id: "20005001",
name: "order",
text: "商家订单管理",
url: "/homeMain/transacts/order"
},
{
id: "20005003",
name: "returngoods",
text: "售后管理",
url: "/homeMain/transacts/returngoods"
},
{
id: "20005005",
name: "yunjireturngoods",
text: "云集售后管理",
url: "/homeMain/transacts/yunjireturngoods"
}
]
},
{
id: "20006",
name: "delivermanagement",
text: "物流信息",
icon: "android-send",
children: [
{
id: "20006001",
name: "express",
text: "快递公司管理",
url: "/homeMain/delivermanagementExpress/express"
}
]
},
{
id: "20018",
name: "warehouse",
text: "仓库管理",
icon: "android-folder-open",
children: [
{
id: "20018001",
name: "warehouseInfo",
text: "入库管理",
url: "/homeMain/warehouse/warehouseInfo"
},
{
id: "20018002",
name: "warehouseAddManagement",
text: "入库管理",
url: "/homeMain/warehouse/warehouseAddManagement"
},
{
id: "20018003",
name: "warehouseLog",
text: "货品入仓记录",
url: "/homeMain/warehouse/warehouseLog"
}
]
}
];
通过id唯一控制
login 登录模块，从后端获取权限，存在前端
// login 登录模块
Login.login(this.userMsg, this.paswMsg).then((res) => {
if (res.data.code == '200') {
sessionStorage.setItem("userName", this.userMsg)
sessionStorage.setItem("mobilePhone", res.data.data.mobilePhone)
sessionStorage.setItem('menu', JSON.stringify(res.data.data.resoucesSet));
this.$api.global = sessionStorage.getItem('menu');
this.$Message.success('登录成功');
sessionStorage.setItem("userLoginId", res.data.data.userLoginId);
sessionStorage.setItem("storeId", res.data.data.storeId);
sessionStorage.setItem('merchantId', res.data.data.merchantId)
this.$router.push({
path: "homeMain/workbench/workbench"
})
this.setCookie("userMsg", this.userMsg);
if (this.singles) {
this.setCookie("paswMsg", CryptoJS.AES.encrypt(this.paswMsg, 'asd').toString());
} else {
this.deleteCookie("paswMsg");
}
} else {
this.$Message.error(res.data.message);
}
})
// 根据后台返回加载目录
init() {
if (!this.reMenu.length) {
this.menulist.splice(0);
}
for (var i = 0; i < this.menulist.length; i++) {
for (var j = 0; j < this.reMenu.length; j++) {
if (this.menulist[i].id == this.reMenu[j].id) {
this.menulist[i].text = this.reMenu[j].name;
this.menulist[i].flag = true;
for (var p = 0; p < this.menulist[i].children.length; p++) {
for (var q = 0; q < this.reMenu[j].childList.length; q++) {
if (
this.menulist[i].children[p].id ==
this.reMenu[j].childList[q].id
) {
this.menulist[i].children[p].text = this.reMenu[j].childList[
q
].name;
this.menulist[i].children[p].flag = true;
}
}
}
}
}
}
for (var i = 0; i < this.menulist.length; i++) {
if (!this.menulist[i].flag) {
this.menulist.splice(i, 1);
i--;
} else if (this.menulist[i].children.length) {
let num = 0;
for (var j = 0; j < this.menulist[i].children.length; j++) {
if (!this.menulist[i].children[j].flag) {
this.menulist[i].children.splice(j, 1);
j--;
} else {
num++;
}
}
if (!num) {
this.menulist.splice(i, 1);
}
}
}
this.childrenNar = this.menulist; //根据后台返回显示左侧的列表
let isBreak, fLeve, sLeve;
this.menulist.forEach(v => {
if (v.children) {
v.children.forEach(val => {
if (
val.url == this.$route.path ||
val.name == sessionStorage.getItem("currActiveName")
) {
isBreak = true;
this.currActiveName = val.name;
sessionStorage.setItem("currActiveName", this.currActiveName);
this.breadcrumb[0] = v.text;
this.breadcrumb[1] = val.text;
this.$emit("getbreadcrumb", this.breadcrumb);
}
});
if (isBreak) {
isBreak = false;
this.openName = [];
this.openName[0] = v.name;
this.childrenNar = this.menulist;
this.$nextTick(() => {
this.$refs.left_menu.updateOpened();
this.$refs.left_menu.updateActiveName();
});
}
}
});
}
路由级别
获取权限列表，动态生成异步路由
if (!!data) {
store.dispatch('user/setMenus', data).then(res => {
routes[0].children = res;
router.addRoutes(routes);
});
next('/');
}动态生成路由``
setMenus({commit},menu){
return new Promise((resolve,reject)=>{
let arr = [];
let muensValue = [];
for(let i=0;i {
if(muensValue.includes(item.path)){
arr.push(item);
}
});
commit('SET_MENU',muensValue);
resolve(arr)
})
}, 按钮级别
处理