前言做后台项目，权限验证和安全很重要，vue-element-admin官方主要介绍前端控制用户菜单加载显示，以及权限控制。这就带来了一些不便，服务端无法（这里可能是绝对的，至少实现起来不是很友好）控制菜单的动态显示，以及用户权限与菜单之间关系的绑定。下面我们分析一下go-admin的代码，让大家一步步了解如何实现服务端控件前端菜单的显示。项目地址：github：https://github.com/guyan0319/...码云（国内）：https://gitee.com/jason0319/g...注：下载多语言版本的vue-element-admin这里是i18n版本，不是master分支。1.修改文件\src\router\index.js中的asyncRoutes变量，exportconstasyncRoutes=[{path:'*',redirect:'/404',hidden:true}]2.修改文件src\store\modules\permission.js具体修改内容代码在go-admin项目中。3、修改src/api/user.js文件中调用服务端接口的方法。修改内容的代码在go-admin项目中。4、这里贴出服务器返回的菜单数据结构：Interfacehttp://localhost:8090/dashboard{"code":20000,"data":[{"children":[{"children":[{"alwaysShow":true,"component":"/system/user/create/index","hidden":false,"id":27,"meta":{"icon":"#","status":true,"title":"添加用户"},"name":"添加用户","path":"/system/user/create","pid":2,"url":"/user/create"},{“component”：“/system/user/list/index”，“hidden”：false，“id”：28，“meta”：{“icon”：“#”，“status”：true，“title”：“用户列表”}，“名称”：“用户列表”，“路径”：“/系统/用户/列表”，“pid”：2，“url”:"/user/index"},{"alwaysShow":true,"component":"/system/user/edit/index","hidden":true,"id":29,"meta":{"icon":"#","status":true,"title":"用户编辑"},"name":"用户编辑","path":"/system/user/edit/:id(\\d+)","pid":2,"url":"/user/edit"}],"component":"/system/user/index","hidden":false,"id":2,"meta":{"icon":"#","status":true,"title":"用户管理"},"name":"用户管理","path":"/system/user","pid":1,"url":"/user"},{"component":"/system/menu/index","hidden":false,"id":3,"meta":{"icon":"#","status":true,"title":"菜单管理"},"name":"菜单管理","path":"/system/menu","pid":1,"url":"/menu"},{"alwaysShow":true,"component":"/system/role/index","hidden":false,"id":26,"meta":{"icon":"#","status":true,"title":"角色管理"},"name":"角色管理","path":"/system/role","pid":1,"url":"/roles"}],"component":"#","hidden":false,"id":1,"meta":{"icon":"fafa-adjust","status":true,"title":"系统管理"},"name":"系统管理","path":"#","pid":0,"url":"#"},{"alwaysShow":true,"children":[{"alwaysShow":true,"组件":"/article/create/index","hidden":false,"id":31,"meta":{"icon":"#","status":true,"title":"CreateArticle"},"name":"创建文章","path":"/article/create","pid":30,"url":"/article/create"},{"alwaysShow":true,"component":"/article/edit/index","hidden":true,"id":32,"meta":{"icon":"#","status":true,"title":"文章编辑"},"name":"文章编辑","path":"/article/edit/:id(\\d+)","pid":30,"url":"/article/edit"},{"alwaysShow":true,"component":"/article/list/index","hidden":false,"id":33,"meta":{"icon":"#","status":true,"title":"文章列表“},"name":"文章列表","path":"/article/list","pid":30,"url":"/article/list"}],"component":"#","hidden":false,"id":30,"meta":{"icon":"#","status":true,"title":"内容管理"},"name":"内容管理","path":"#","pid":0,"url":"/article"}]}这里需要说明一下返回的json数据结构中的几个关键点：url:这个是对应的调用服务器接口，用于服务器端控制路由权限，前端要根据相应接口调用（在api文件夹方法中修改）component:等于#是一级引用，这里有一个容易忽略的细节，如果组件文件修改不好，会导致重复嵌套引用。这里使用vue的
