vue 后台管理菜单栏通过后端获取实现权限控制

vue 后台管理菜单栏通过后端获取实现权限控制_vue 如何获取权限菜单_不想学习只想玩的博客-CSDN博客

后台管理系统左侧导航栏通过后端获取实现权限控制

<template>
    <div class="menu-wrapper">
        <ul class="sys-menu">
            <li v-for="(item, index) in sysMenu" :key="index" :class="{ active: activeId === index }"
                @click="toggleActive(item, index)">
                <router-link :to="item.path" v-if="item.path">
                    <i :class="['iconfont', item.icon]"></i>
                    {{ item.name }}
                    <div :class="[activeId === index ? 'opened' : '', 'right-icon']"></div>
                </router-link>
                <a v-else>
                    <i :class="['iconfont', item.icon]"></i>
                    {{ item.name }}
                    <div :class="[activeAllId === index ? 'opened' : '', 'right-icon']"></div>
                </a>
                <!-- 二级菜单 -->
                <ul class="menu-child" v-if="item.children" :class="{ showChild: activeAllId === index }">
                    <li v-for="(child, i) in item.children" :key="i" @click.stop="toggleActiveChild(i)"
                        :class="[activeChildId === i ? 'active' : '', child.status === 0 ? 'blank-page-li' : '']">
                        <router-link :to="child.path">
                            <div class="child-icon"></div>
                            {{ child.name }}
                        </router-link>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
import router from "@/router";
import { sysMenu } from "../../util/menu.js"
export default {
    name: "Menu",
    data() {
        return {
            // sysMenu,
            sysMenu: [],
            activeId: -1,
            activeAllId: -1,
            activeChildId: -1
        };
    },
    methods: {
        // 一级菜单
        toggleActive(param, i) {
            if (param.path && this.activeId !== i) {
                this.activeId = i;
                this.activeAllId = -1;
            }
            else {
                let active = 0;
                if (this.activeAllId === i) {
                    this.activeAllId = -1
                }
                else {
                    this.toggleActiveChild(active, param.children[0]);
                    if (param.children.length !== 0) {
                        this.activeAllId = i;
                    }
                }
            }
        },
        // 二级菜单
        toggleActiveChild(i, path) {
            this.activeId = -1;
            this.activeChildId = i;
            if (path) {
                this.$router.replace(path.path);
            }
        },
        ss(path) {
            this.$router.replace(path);
        }
    },
    watch: {
        $route(newVal, oldVal) {
            // console.log("newVal", newVal);
        }
    },
    // mounted() {
    //     var path = this.$route.path
    //     this.sysMenu.forEach((name, index) => {
    //         name.children.forEach((child, i) => {
    //             if (child.path === path) {
    //                 this.activeAllId = index;
    //                 this.activeChildId = i
    //             }
    //         })
    //     })
    // },
    mounted() {
    function compare(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    }
    setTimeout(() => {
      let menuList = JSON.parse(localStorage.getItem("query")).children[0]
        .children;
      // type： 1模块 2页面 3按钮 4子页面
      if (menuList) {
        if (menuList.length !== 0) {
          menuList.forEach((modular, index) => {
            if (modular.type === 2) {
            } else {
              modular.children = modular.children.sort(compare("porder"));
            }
            if (modular.select) {
              let selectMenu = JSON.parse(JSON.stringify(modular));
              selectMenu.children = [];
              if (modular.children.length !== 0) {
                modular.children.forEach((children, key) => {
                  if (children.select) {
                    selectMenu.children.push(children);
                  }
                });
              }
              setTimeout(() => {
                if (
                  selectMenu.children.length === 0 &&
                  selectMenu.path === ""
                ) {
                } else {
                  this.sysMenu.push(selectMenu);
                }
              }, 300);
            } else {
              let selectMenu = JSON.parse(JSON.stringify(modular));
              selectMenu.children = [];
              if (modular.children.length !== 0) {
                modular.children.forEach((children, key) => {
                  if (children.select) {
                    selectMenu.children.push(children);
                    let index = this.sysMenu.findIndex(
                      isMenu => isMenu.id === selectMenu.id
                    );
                    if (index === -1) {
                      this.sysMenu.push(selectMenu);
                    }
                  }
                });
              }
            }
          });

          setTimeout(() => {
            this.sysMenu = this.sysMenu.sort(compare("porder"));
            this.sysMenu.forEach((item, index) => {
              if (item.path) {
                if (item.path === this.$route.path) this.activeId = index;
              } else {
                item.children.forEach((child, i) => {
                  if (child.path === this.$route.path) {
                    this.activeAllId = index;
                    this.activeChildId = i;
                  }
                });
              }
              // }
            });
          }, 800);
        } else {
          this.$message.error("请联系管理员分配权限");
          setTimeout(() => {
            this.$router.replace("/");
          }, 500);
        }
      } else {
        this.$message.error("登录信息不正确，请重新登录");
        setTimeout(() => {
          this.$router.replace("/");
        }, 500);
      }
    }, 500);
  },
    components: { router }
}
</script>
<style scoped>
.menu-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 一级菜单 */
.sys-menu {
    width: 100%;
    height: 100%;
    background-color: transparent;
    box-sizing: border-box;
    color: white;
    font-size: 16px;
    font-weight: 400;
    font-family: Source Han Sans CN;
    padding-left: 0;
    padding-bottom: 0;
    position: absolute;
    text-align: left;
    overflow-x: hidden;
    overflow-y: auto;
}

.sys-menu>li {
    cursor: pointer;
    display: block;
}

.right-icon {
    float: right;
    margin-right: 20px;
    margin-top: 26px;
    transition-duration: 0.4s;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #fff;
}
.opened {
  transform: rotate(90deg);
}
.sys-menu>.active>a>.opened {
    transform: rotate(90deg);
}

.sys-menu>li>a {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    color: white;
    display: block;
    line-height: 60px;
    padding-left: 20px;
    text-decoration: none;
}

/* 二级菜单 */
.menu-child {
    display: none;
    font-size: 14px;
    font-family: Source Han Sans CN;
    transition-duration: 0.3s;
    padding-bottom: 15px;
    padding-left: 0;
}

.menu-child>li.active {
    background-color: rgba(255, 255, 55, 0.14);
}

.child-icon {
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.menu-child>li>a {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    box-sizing: border-box;
    display: inline-block;
    text-decoration: none;
    padding-left: 44px;
}

.showChild {
    display: block;
}

.blank-page-li>a {
    color: #c0c0c0 !important;
}
</style>