前后端分离开发中动态菜单的两种实现方案

2. 具体实现

---

一旦建立起这样的思考框架，你会发现动态菜单的实现办法太多了。

动态菜单就是用户登录之后看到的菜单，不用角色的用户登录成功之后，会看到不用的菜单项，这个动态菜单要怎么实现呢？整体来说，有两种不同的方案，松哥曾经做过的项目中，两种方案也都有用过，这里分别来和大家分享一下。

2.1 后端动态返回

后端动态返回，这是我在微人事中采用的方案。微人事中，权限管理相关的表一共有五张表，如下：

其中 hr 表就是用户表，用户登录成功之后，可以查询到用户的角色，再根据用户角色去查询出来用户可以操作的菜单（资源），然后把这些可以操作的资源，组织成一个 JSON 数据，返回给前端，前端再根据这个 JSON 渲染出相应的菜单。以微人事为例，我们返回的 JSON 数据格式如下：

[

{

“id”:2,

“path”:“/home”,

“component”:“Home”,

“name”:“员工资料”,

“iconCls”:“fa fa-user-circle-o”,

“children”:[

{

“id”:null,

“path”:“/emp/basic”,

“component”:“EmpBasic”,

“name”:“基本资料”,

“iconCls”:null,

“children”:[

],

“meta”:{

“keepAlive”:false,

“requireAuth”:true

}

}

],

“meta”:{

“keepAlive”:false,

“requireAuth”:true

}

}

]

这样的 JSON 在前端中再进行二次处理之后，就可以使用了，前端的二次处理主要是把 component 属性的字符串值转为对象。这一块具体操作大家可以参考微人事项目（具体在：https://github.com/lenve/vhr/blob/master/vuehr/src/utils/utils.js），我就不再赘述了。

这种方式的一个好处是前端的判断逻辑少一些，后端也不算复杂，就是一个 SQL 操作，前端拿到后端的返回的菜单数据，稍微处理一下就可以直接使用了。另外这种方式还有一个优势就是可以动态配置资源-角色以及用户-角色之间的关系，进而调整用户可以操作的资源(菜单)。

2.2 前端动态渲染

另一种方式就是前端动态渲染，这种方式后端的工作要轻松一些，前端处理起来麻烦一些，松哥去年年末帮一个律所做的一个管理系统，因为权限上比较容易，我就采用了这种方案。

这种方式就是我直接在前端把所有页面都在路由表里边定义好，然后在 meta 属性中定义每一个页面需要哪些角色才能访问，例如下面这样：

[

{

“id”:2,

“path”:“/home”,

“component”:Home,

“name”:“员工资料”,

“iconCls”:“fa fa-user-circle-o”,

“children”:[

{

“id”:null,

“path”:“/emp/basic”,

“component”:EmpBasic,

“name”:“基本资料”,

最后

分享一套我整理的面试干货，这份文档结合了我多年的面试官经验，站在面试官的角度来告诉你，面试官提的那些问题他最想听到你给他的回答是什么，分享出来帮助那些对前途感到迷茫的朋友。

面试经验技巧篇

• 经验技巧1 如何巧妙地回答面试官的问题
• 经验技巧2 如何回答技术性的问题
• 经验技巧3 如何回答非技术性问题
• 经验技巧4 如何回答快速估算类问题
• 经验技巧5 如何回答算法设计问题
• 经验技巧6 如何回答系统设计题
• 经验技巧7 如何解决求职中的时间冲突问题
• 经验技巧8 如果面试问题曾经遇见过，是否要告知面试官
• 经验技巧9 在被企业拒绝后是否可以再申请
• 经验技巧10 如何应对自己不会回答的问题
• 经验技巧11 如何应对面试官的“激将法”语言
• 经验技巧12 如何处理与面试官持不同观点这个问题
• 经验技巧13 什么是职场暗语

面试真题篇

• 真题详解1 某知名互联网下载服务提供商软件工程师笔试题
• 真题详解2 某知名社交平台软件工程师笔试题
• 真题详解3 某知名安全软件服务提供商软件工程师笔试题
• 真题详解4 某知名互联网金融企业软件工程师笔试题
• 真题详解5 某知名搜索引擎提供商软件工程师笔试题
• 真题详解6 某初创公司软件工程师笔试题
• 真题详解7 某知名游戏软件开发公司软件工程师笔试题
• 真题详解8 某知名电子商务公司软件工程师笔试题
• 真题详解9 某顶级生活消费类网站软件工程师笔试题
• 真题详解10 某知名门户网站软件工程师笔试题
• 真题详解11 某知名互联网金融企业软件工程师笔试题
• 真题详解12 国内某知名网络设备提供商软件工程师笔试题
• 真题详解13 国内某顶级手机制造商软件工程师笔试题
• 真题详解14 某顶级大数据综合服务提供商软件工程师笔试题
• 真题详解15 某著名社交类上市公司软件工程师笔试题
• 真题详解16 某知名互联网公司软件工程师笔试题
• 真题详解17 某知名网络安全公司校园招聘技术类笔试题
• 真题详解18 某知名互联网游戏公司校园招聘运维开发岗笔试题

资料整理不易，点个关注再走吧

软件工程师笔试题

• 真题详解15 某著名社交类上市公司软件工程师笔试题
• 真题详解16 某知名互联网公司软件工程师笔试题
• 真题详解17 某知名网络安全公司校园招聘技术类笔试题
• 真题详解18 某知名互联网游戏公司校园招聘运维开发岗笔试题

[外链图片转存中…(img-7suMffO8-1714188706016)]

资料整理不易，点个关注再走吧

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录