后台菜单权限管理怎么实现

Question

我想让不同的用户登录加载不同的菜单，请问应该在哪个文件里写呢，应该怎么写呢？
我的前端菜单代码如下：

<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;
    }

Answer 1

您可以将不同用户的菜单配置存储在后端数据库中，并在用户登录时获取其对应的菜单配置数据，然后再动态生成前端菜单代码。

具体来说，您需要在后端编写一个接口，用于获取当前登录用户的菜单配置数据。该接口可以返回一个包含菜单项信息的 JSON 对象。您可以在前端的登录页面或者 App.vue 文件中调用该接口，并将获取到的菜单配置数据保存在 Vuex 中或者通过 props 传递给子组件。

在上述代码中，您可以将 menuList 数组改为从后端获取的数据，然后使用 v-for 循环动态生成菜单项和子菜单项，如下所示：

{{item.title}} {{it.title}} 其中，menuList 数组中每个元素都代表一个顶级菜单项，其 sList 属性是该顶级菜单项下的子菜单项数组。您可以根据用户的角色或权限等信息，在后端对 menuList 数组进行过滤或重组，以实现不同用户加载不同的菜单。