我想让不同的用户登录加载不同的菜单,请问应该在哪个文件里写呢,应该怎么写呢?
我的前端菜单代码如下:
<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
<template slot="title">
<i class="el-icon-location">i>
<span>{{item.title}}span>
template>
<el-menu-item :index="it.path" v-for="it in item.sList" :key="it.id" @click="savePath(it.path)">
<template slot="title">
<i class="el-icon-location">i>
<span>{{it.title}}span>
template>
el-menu-item>
el-submenu>
后端菜单相关代码如下:
public class MainMenu {
private int id;
private String title;
private String path;
private List<SubMenu> sList;
public class SubMenu {
private int id;
private String title;
private String path;
public List<MainMenu> getMenus();
<resultMap id="menuMap" type="com.bishe.springboot.bean.MainMenu">
<id column="id" property="id"/>
<result column="title" property="title"/>
<result column="path" property="path"/>
<collection property="sList" ofType="com.bishe.springboot.bean.SubMenu" javaType="java.util.List">
<result column="sid" property="id"/>
<result column="stitle" property="title"/>
<result column="spath" property="path"/>
collection>
resultMap>
<select id="getMenus" resultMap="menuMap">
SELECT mm.*,sm.id as sid ,sm.title as stitle,sm.path as spath FROM
mainmenu mm ,submenu sm WHERE mm.id = sm.mid;
select>
@RequestMapping("/menus")
public String getAllMenus(){
HashMap<String,Object> data = new HashMap<>();
List<MainMenu> menus = menuDao.getMenus();
if (menus!=null){
data.put("menus",menus);
data.put("flag",200);
}else {
data.put("flag",404);
}
String s = JSON.toJSONString(data);
return s;
}
您可以将不同用户的菜单配置存储在后端数据库中,并在用户登录时获取其对应的菜单配置数据,然后再动态生成前端菜单代码。
具体来说,您需要在后端编写一个接口,用于获取当前登录用户的菜单配置数据。该接口可以返回一个包含菜单项信息的 JSON 对象。您可以在前端的登录页面或者 App.vue 文件中调用该接口,并将获取到的菜单配置数据保存在 Vuex 中或者通过 props 传递给子组件。
在上述代码中,您可以将 menuList 数组改为从后端获取的数据,然后使用 v-for 循环动态生成菜单项和子菜单项,如下所示:
{{item.title}} {{it.title}} 其中,menuList 数组中每个元素都代表一个顶级菜单项,其 sList 属性是该顶级菜单项下的子菜单项数组。您可以根据用户的角色或权限等信息,在后端对 menuList 数组进行过滤或重组,以实现不同用户加载不同的菜单。