层级菜单页面以及后端菜单接口

根据不同用户登陆能看到不同的菜单
main.js页面中引入Vue.prototype插件里,做请求全局方法,各个组件用this调用方法

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import {getRequest} from "./utils/api"; //引入请求api.js里面的请求方法
import {postRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {postKeyValueRequest} from "./utils/api";

Vue.prototype.getRequest=getRequest;  //请求封装到插件里,做全局
Vue.prototype.postRequest=postRequest;
Vue.prototype.deleteRequest=deleteRequest;
Vue.prototype.putRequest=putRequest;
Vue.prototype.postKeyValueRequest=postKeyValueRequest;

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Login.vue登陆页面
优化了请求方法this.postKeyValueRequest调用

<template>
    <div style="display: flex;justify-content: center">
        <el-card class="box-card" style="width:400px;margin-top: 100px">
            <div slot="header" class="clearfix">
                <span>登陆</span>
            </div>
            <div>
                 <table>
                <tr>
                    <td>用户名</td>
                 <td>
                     <el-input v-model="user.username" placeholder="请输入内容"></el-input>
                 </td>
                </tr>

                <tr>
                    <td>密码</td>
                <td><el-input placeholder="请输入密码" v-model="user.password" show-password
                              @keydown.enter.native="doLogin"></el-input>
                </td>
             </tr>
                 <tr>
                <td colspan="2">
                    <el-button type="primary" round style="width: 280px;" @click="doLogin" >登陆</el-button>
                </td>
                    </tr>
                </table>
            </div>
        </el-card>
    </div>
</template>

<script>

//    import {postKeyValueRequest} from "../utils/api";

    export default {
        name: "Login ",
        data(){
            return{
                user:{
                    username:`admin`,
                    password:`123`
                }
            }
        },
        methods:{
            doLogin(){
                this.postKeyValueRequest('/doLogin',this.user).then(resp=>{
                    if (resp){
                    window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
                    this.$router.replace('/home'); //路由
                    }
                })
            }
        }
    }
</script>
<style scoped>
</style>

Test1.vue测试菜单

<template>
    <h1>1</h1>
</template>

<script>
    export default {
        name: "Test1"
    }
</script>
<style scoped>
</style>

Test2.vue测试菜单二

<template>
    <h1>2</h1>
</template>
<script>
    export default {
        name: "Test2"
    }
</script>

<style scoped>
</style>

index.js注册测试组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'


Vue.use(VueRouter)

/**
 *                上面是组件注册地址,它来判断登陆vue-router
 * @type {*[]}    在组件中要展示的数据
 *                path: '/',组件跳转的地址
 *                name: 'login', 组件要显示的名
 *                children 组件中菜单展示的层级
 *                hidden: true 不遍历此组件  v-if="!item.hidden"
 */
const routes = [
  {
    path: '/',
    name: 'login',
    hidden: true,
    component: Login,
  },
    {
        path: '/home',
        name: 'Home',
        hidden: true,
        component: Home,
    },
    {
        path: '/home',
        name: '测试菜单一',
        component: Home,
        children:[
            {
                path: '/test1',
                name: '测试菜单1-1',
                component: Test1,
            },
            {
                path: '/test2',
                name: '测试菜单1-2',
                component: Test2,
            },
        ]
    }
]
const router = new VueRouter({
  routes
})
export default router

Home.vue
增加子菜单,用for循环遍历index.js中的routes 数组,根据里面的值来引用其它vue组件

<template>
    <div>
        <el-container>
            <el-header style="display: flex;background-color: #409eff;align-items: center;justify-content:space-between">
                <div style="font-size: 28px;font-family: 华文行楷">XXX管理系统</div>
                <el-dropdown style="cursor: pointer" @command="menuCud">
  <span class="el-dropdown-link" style="display: flex;align-items: center">
      {{user.name}}<i><img :src="user.userface" alt="" style="width: 48px;height: 48px;border-radius: 24px"></i>
  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="usercenter">个人中心</el-dropdown-item>
                        <el-dropdown-item command="setting">设置</el-dropdown-item>
                        <el-dropdown-item command="logout">注销</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>

            </el-header>
            <el-container>
                <el-aside width="200px">

                    <el-menu router>
                        <el-submenu :index="index" v-for="(item,index) in this.$router.options.routes" :key="index" v-if="!item.hidden">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.name}}</span>
                            </template>
                                <el-menu-item :index="child.path" v-for="(child,indexj) in item.children" :key="indexj">{{child.name}}</el-menu-item>

                        </el-submenu>
                    </el-menu>

                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
//    import {getRequest} from "../utils/api";


    export default {
        name: "Home",
        data(){
            return{
                user:JSON.parse(window.sessionStorage.getItem("user"))  //登陆后信息保存
            }
        },
        methods:{
            //事件点击优化 router
            // menuSelect(index){
            //     this.$router.push(index);
            //
            // },
            menuCud(cmd){
                if (cmd == 'logout') {
                    this.$confirm('此操作将注销登陆, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.getRequest("/logout"); //调用api.js里get方法注销请求
                        window.sessionStorage.removeItem("user");  //删除数据
                        this.$router.replace('/'); //回主菜单页面
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });

                }
            }
        }

    }
</script>
<style scoped>
</style>

菜单接口
SystemConfigController

/**
 * 菜单接口
 */
@RestController
@RequestMapping("/system/config")
public class SystemConfigController {

    @Autowired
    MenuService menuService;

    /**
     *
     * @return 数据库里根据用户id查询菜单
     *          从前端获取用户信息不安全
     */
    @GetMapping("/menus")
    public List<Menu> getMenusByHrId(){
        return menuService.getMenusByHrId();
    }
}

MenuService

/**
 * 根据用户获取菜单
 */
@Service
public class MenuService {
    @Autowired
    MenuMapper menuMapper;
    /**
     *
     * @return 获取登陆用户ID,返回用户菜单
     */
    public List<Menu> getMenusByHrId() {
        return menuMapper.getMenusByHrId(((Hr) SecurityContextHolder.getContext().getAuthentication().getPrincipal()).getId());
    }
}

MenuMapper

public interface MenuMapper {
    /**
     * 
     * @param hrid用户id
     * @return 菜单
     */
    List<Menu> getMenusByHrId(Integer hrid);

Menu

/**
 * 菜单实体类
 */
public class Menu {
    private Integer id;  

    private String url;

    private String path;

    private String component;

    private String name;

    private String iconcls;

    private Boolean keepalive;

    private Boolean requireauth;

    private Integer parentid;

    private Boolean enabled;

    private List<Menu> children;

MenuMapper.xml

  <resultMap id="BaseResultMap2" type="org.XXX.XXX.model.Menu" extends="BaseResultMap">
    <collection property="children" ofType="org.javaboy.baiweiserver.model.Menu">
      <id column="id2" property="id" jdbcType="INTEGER"/>
      <result column="url2" property="url" jdbcType="VARCHAR"/>
      <result column="path2" property="path" jdbcType="VARCHAR"/>
      <result column="component2" property="component" jdbcType="VARCHAR"/>
      <result column="name2" property="name" jdbcType="VARCHAR"/>
      <result column="iconCls2" property="iconcls" jdbcType="VARCHAR"/>
      <result column="keepAlive2" property="keepalive" jdbcType="BIT"/>
      <result column="requireAuth2" property="requireauth" jdbcType="BIT"/>
      <result column="parentId2" property="parentid" jdbcType="INTEGER"/>
      <result column="enabled2" property="enabled" jdbcType="BIT"/>
    </collection>
  </resultMap>
  <!--根据用户id查询菜单-->
  <select id="getMenusByHrId" resultMap="BaseResultMap2">
    select m1.*,m2.`id` as id2,m2.`component` as component2,m2.`enabled` as enabled2,m2.`iconCls` as iconCls2,m2.`keepAlive`
            as keepAlive2,m2.`name` as name2,m2.`parentId` as parentId2,m2.`path` as path2,m2.`requireAuth` as requireAuth2,m2.`url` as url2
     from menu m1,menu m2,menu_role mr,hr_role hrr
     where m1.`id`=m2.`parentId` and mr.`mid`=m2.`id` and hrr.`rid`=mr.`rid` and hrr.`hrid`=#{hrid}
     order by m1.`id` ,m2.`id`
  </select>

http://localhost:8081/system/config/menus