vue根据不同权限显示图片_Vue-element-admin实现菜单根据用户权限动态加载

上面有两个分支，master是对应php后端的，itsys-net是对应asp.net core后端的。

这里我简单介绍下我这个系统前端代码，当时我几乎完全参考vue-element-admin的，不过没用它的代码，但写法几乎都参考了他的教程，不过有一点不同的是，我的路由跟菜单是动态生成的，是后台根据当前登录的用户，查询用户的角色，再查询角色所具有的菜单列表，返回到前端，然后在前端生成Routers树数据，再用router.addRouters方法挂载到router上，当然vue-element-admin的作者也有考虑到这个问题，看下图。

那我来介绍下我的系统是怎么实现这种动态权限的需求的，当然我的代码不完全跟vue-element-admin一样，只是提供一种思路。

先介绍下我数据表(sys_menu)的结构，如下图所示，很明显，我的数据表(sys_menu)是一个树型结构，主要的字段有id，title(决定你前端菜单的标题)，path(很重要，前端会根据这个值去寻找views下面的vue文件，所以前端创建的文件夹名称必须跟这个值一致)，parent_id(父级菜单id)，order(菜单的排序顺序)，还有一个parent_ids字段， 这个只是我在其它查询中的一个辅助字段，在这里没什么作用。

后端获取菜单数据，以下sql不涉