中后台系统-权限设计

权限控制是中后台系统中常见的需求之一

控制粒度

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<menu.length;i++){
              muensValue.push(menu[i].menuValue)
            };
            asyncRouter.forEach( (item, index) => {
                if(muensValue.includes(item.path)){
                    arr.push(item);
                }
            });
            commit('SET_MENU',muensValue);
            resolve(arr)
        })
    },

按钮级别

<div v-if='(rows.refundState=="1"||rows.refundState=="2"||rows.refundState=="4") && $api.global.indexOf("20005003001")!="-1"' class="action" @click="godetail(rows.id)">处理</div>