[VUE学习]权限管理系统前端vue实现7-左侧动态权限菜单

叁歲伎倆 2024-04-20 22:12 36阅读 0赞

## 1.后端返回树形菜单结构 ##

@Override
    public List<SysMenu> buildTreeMenu(List<SysMenu> sysMenuList) {
        List<SysMenu> resultMenuList=new ArrayList<>();
    
        for(SysMenu sysMenu:sysMenuList){
            // 寻找子节点
            for(SysMenu e:sysMenuList){
                if(e.getParentId()==sysMenu.getId()){
                    sysMenu.getChildren().add(e);
                }
            }
    
            // 判断父节点，添加到集合
            if(sysMenu.getParentId()==0L){
                resultMenuList.add(sysMenu);
            }
        }
    
        return resultMenuList;
    }

## 2.登录之后 把menuList放到session里面 ##

store.commit("SET_MENULIST",menuList)

getters: {
        GET_TOKEN:state => {
          return sessionStorage.getItem("token")
        },
        GET_MENULIST:state => {
          return JSON.parse(sessionStorage.getItem("menuList"))
        }
      },
      mutations: {
        SET_TOKEN:(state,token)=>{
          sessionStorage.setItem("token",token)
        },
        // 会话存储中只能存储string类型数据
        SET_MENULIST:(state,menuList)=>{
          sessionStorage.setItem("menuList",JSON.stringify(menuList))
        },
    
      },

为什么要进行json 和 字符串转化？

因为会话只能存储字符串

## 3.菜单index ##

<template>
    
      <el-menu
          active-text-color="#ffd04b"
          background-color="#2d3a4b"
          class="el-menu-vertical-demo"
          text-color="#fff"
          router
          :default-active="'/index'"
    
      >
        //默认选中
        <el-menu-item index="/index">
          <el-icon></el-icon>
          <span>首页</span>
        </el-menu-item>
    
        <el-sub-menu :index="menu.path" v-for="menu in menuList">
            <template #title>
                <el-icon>
                  <svg-icon :icon="menu.icon"></svg-icon>
                </el-icon>
                <span>{
       { menu.name }}</span>
            </template>
    
            <el-menu-item :index="item.path" v-for="item in menu.children">
                <el-icon>
                  <svg-icon :icon="item.icon"></svg-icon>
                </el-icon>
                <span>{
       { item.name }}</span>
          </el-menu-item>
        </el-sub-menu>
    
      </el-menu>
    </template>
    
    <script setup>
    import {
      HomeFilled,
      User,
      Tickets,
      Goods,
      DocumentAdd,
      Management,
      Setting,
      Edit,
      SwitchButton,
      Promotion
    } from '@element-plus/icons-vue'
    import {ref} from 'vue'
    import store from '@/store'
    
    const menuList = store.getters.GET_MENULIST
    console.log(menuList )
    
    </script>
    
    <style scoped>
    
    </style>