Vue纯数据驱动实现后台管理系统权限控制

页面结构

行为交互

效果展示

---

权限: 根据不同的用户组, 来展示不同的功能(动态树菜单)
核心: 判断用户组, 对界面树菜单选项卡进行增删

页面结构

<div v-for="item in powerarr" :key="item.url"> 
      <el-menu-item :index="item.url" v-if="!item.children">
        <i :class="item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
      <el-submenu :index="item.url" v-else>
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
          <el-menu-item v-for="item1 in item.children" 
          :key="item1.url" :index="item1.url">{{item1.name}}</el-menu-item>
      </el-submenu>
</div>

行为交互

 data() {
    return {
      username: "", //用户名
      //动态菜单
      list: [
        {
          url: "/main/index",
          icon: "el-icon-message-solid",
          name: "后台首页",
          roles: ["super", "normal"]
        },
        {
          url: "/main/additem",
          icon: "el-icon-s-promotion",
          name: "订单管理",
          roles: ["super", "normal"]
        },
        {
          url: "/main/items",
          icon: "el-icon-shopping-bag-1",
          name: "商品管理",
          children: [
            { url: "/main/itemslist", name: "商品列表" },
            { url: "/main/itemadd", name: "添加商品" },
            { url: "/main/itemsort", name: "商品分类" }
          ],
          roles: ["super", "normal"]
        },
        {
          url: "/main/shops",
          icon: "el-icon-s-shop",
          name: "店铺管理",
          roles: ["super"]
        },
        {
          url: "/main/users",
          icon: "el-icon-user",
          name: "账号管理",
          children: [
            { url: "/main/userslist", name: "用户列表" },
            { url: "/main/usersadd", name: "添加用户" },
            { url: "/main/userssort", name: "修改用户" }
          ],
          roles: ["super"]
        },
        {
          url: "/main/total",
          icon: "el-icon-s-data",
          name: "销售统计",
          children: [
            { url: "/main/saletotal", name: "销售统计" },
            { url: "/main/ordertotal", name: "订单统计" }
          ],
          roles: ["super"]
        }
      ]
    };
  },
  computed: {
    powerarr() {
      //根据权限返回运算完毕的数组
      //filter()  过滤函数
      let newarr = this.list.filter(item => {
        //返回包含此用户权限的数据
        return item.roles.includes(localStorage.role);
      });
      return newarr;
    }
  },

效果展示