11、幽络源微服务项目实战：ElementUI图标库的使用+动态菜单动态路由控制+Security登录用户获取

前言

这一节我们来学习Vue2项目ElementUI的图标库使用，前面我们已经把权限管理的相关功能都做好了，只是里面的图标处我们还需完善。

使用ElementUI图标库

官方文档见 -> https://element.eleme.cn/#/zh-CN/component/icon

因为我们是使用的vue2项目，这里无需额外引入图标库，参考官方文档的用法，直接在class样式添加相应的值即可，如图

eab21170-cffd-4cad-88c4-4bf1215215a5

幽络源的代码中已经是绑定了class演示，并且图标值来源于数据中，因此可直接使用，如图

9c443c8c-76f5-4e50-8dc9-59d38858cdfa

在编辑权限处，将elementui的图标值复制粘贴到编辑框即可，如图可以看到图标信息成功展现

9965d7df-31c7-452f-a821-3510b073f9e9

3f1db0c7-38b5-4cf7-8e43-2eb61ffba618

8e2041bf-257d-481d-93a9-9f37163bb548

动态菜单动态路由的开发

上面我们引入了Element的图标，权限管理表格的图标成功的展现了，但是左侧的导航菜单却没有变动，是因为幽络源的项目中的菜单现在还是静态的，我们需要将其修改开发为动态菜单，使菜单信息来自于数据库，而不是写死。

通过分析菜单页面可知我们这里需要查询出的数据包括了菜单的路径、图标值、名称、层级关系，而菜单的排序我们直接在后端处理即可，如图

b222314a-6dce-46e6-b540-b07d20b33106

在权限管理的controller中添加新的接口，名为查询菜单，代码与图如下

/**
     * 菜单查询
     * @return
     */
    @GetMapping("/selectMenu")
    public ResResult<?> selectMenu(@AuthenticationPrincipal UserDetailObject userDetails) {
        Long userId = userDetails.getUser().getId();
        return permissionService.selectMenu(userId);
    }

07a08d3f-0594-4831-a2d3-eb0f00c39d76

服务层和持久层如下，和我们查权限是一样的，也是需要递归的，代码与图如下

@Override
    public ResResult<?> selectMenu(Long userId) {
        //查询用户拥有的所有菜单
        ArrayList<Permission> menus=permissionMapper.selectMenuByUserId(userId);
        //构建菜单树
        List<Permission> menusTree = buildTree(menus, null);
        return ResResult.success(menusTree,"菜单查询成功");
    }

<!--ArrayList<Permission> selectMenuByUserId(@Param("userId") Long userId);-->
    <select id="selectMenuByUserId" resultType="com.tenant.entity.Permission">
        select p.id as id,p.`name` as name,p.parent_id as parentId,p.path as path,p.icon as icon,p.sort as sort
        from tbs_user u
        left join tbs_user_role ur on ur.user_id = u.id
        left join tbs_role r on r.id = ur.role_id
        left join tbs_role_permission rp on rp.role_id = r.id
        left join tbs_permission p on p.id = rp.permission_id
        where u.id=#{userId} and type=1
    </select>

0d97064a-8ea2-4e53-8915-63f9bdd49871

d27de0d4-3e35-4078-9506-c5fb4d4f617d

初次之外，我们还需修改前端的菜单组件为动态获取，在permission.js新增请求封装-获取菜单，如图

e690d4da-5de0-4a46-9952-f7c71738cc90

然后菜单组件调用请求，修改为动态组件，代码如下

template：

<template>
  <aside class="app-sidebar">
    <el-menu
        :default-active="$route.path"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
    >
      <!-- 首页菜单（固定） -->
      <el-menu-item index="/home">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <!-- 动态渲染菜单 -->
      <template v-for="menu in menus">
        <!-- 有子菜单的情况 -->
        <el-submenu
            v-if="menu.children && menu.children.length > 0"
            :key="menu.id"
            :index="menu.path || menu.id.toString()"
        >
          <template slot="title">
            <i :class="menu.icon"></i>
            <span>{{ menu.name }}</span>
          </template>
          <el-menu-item
              v-for="child in menu.children"
              :key="child.id"
              :index="child.path"
          >
            <i :class="child.icon"></i>
            <span>{{ child.name }}</span>
          </el-menu-item>
        </el-submenu>

        <!-- 没有子菜单的情况 -->
        <el-menu-item
            v-else
            :key="menu.id"
            :index="menu.path"
        >
          <i :class="menu.icon"></i>
          <span slot="title">{{ menu.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </aside>
</template>

script：

<script>
import {selectMenu} from '@/api/tenant/permission'
export default {
  name: 'AppSidebar',
  data(){
    return {
      menus:[] //菜单
    }
  },
  methods:{
    getAndSetMenus(){
      selectMenu().then(res=>{
        if (res.code===1){
          this.menus=res.data
        }
      })
    }
  },
  mounted(){
    this.getAndSetMenus();
  }
}
</script>

然后这里有个注意点！！！

源码中前端的路由除了首页，目前多租户模块的路径是tenant开头的，如下

31369144-651b-4566-a6e6-ba7c4cfc79f3