第七节：Vben Admin权限-后端获取路由和菜单

已于 2024-05-03 20:12:16 修改
阅读量2k 收藏 16
点赞数 16
分类专栏： Vben Admin框架实战(Python后端) 文章标签： anti-design-vue 前端框架 vue flask python vben admin 前后端框架
于 2024-03-13 21:48:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cui_win/article/details/136690680
版权
本文是Vben Admin权限管理系列的第七节，主要讲解在后端控制权限模式下，如何实现获取路由和菜单的接口。通过分析前端代码，了解到后端需要返回的数据结构，使用Python Flask编写了/getMenuList接口，并成功返回了一级及二级菜单。后续优化将涉及权限数据的数据库存储和查询。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

系列文章目录

基础篇
第一节：Vben Admin介绍和初次运行
第二节：Vben Admin 登录逻辑梳理和对接后端准备
第三节：Vben Admin登录对接后端login接口
第四节：Vben Admin登录对接后端getUserInfo接口
第五节：Vben Admin权限-前端控制方式
第六节：Vben Admin权限-后端控制方式
第七节：Vben Admin权限-后端获取路由和菜单

实战篇
第八节：Vben Admin登录页面自定义
第九节：Vben Admin实战-系统管理之角色管理实现-上
第十节：Vben Admin实战-系统管理之角色管理实现(分页查询，修改)-中
第十一节：Vben Admin实战-系统管理之角色管理实现(删除，状态修改)-下

了解本专栏 订阅专栏 解锁全文 超级会员免费看
第十四节：Vben Admin实战-系统管理之角色菜单绑定
cui_win的专栏
08-02 587
权限管理部分，目前已经实现了角色，用户，菜单的管理，现在还剩余一个重要的部分，是角色和菜单的动态绑定。Vben Admin 演示案例部分，是在角色管理的抽屉弹出框实现的，但是感觉展示不够直观，我们这里用一个单独的页面实现这部分的功能。src/api/sys/role.ts 文件中定义：# 角色菜单关联表现在权限管理部分的功能基本已经都实现了，还记得第七节：Vben Admin权限-后端获取路由和菜单。
Vue-Vben-Admin-一个使用composition-api+ts的后台系统
热门推荐
ann的博客
07-24 3万+
VUE VBEN ADMIN 介绍 vue-vben-admin 是一个全新的开源系统,基于ant-design-vue,typescript,@vue/composition-api,tsx实现的 vue3 风格的后台管理系统，让您提前学习vue3+ts带来的体验。适合中大型项目的开发，实际开发中可以直接使用。 兼容 vue2 的浏览器，一切免费，不收取任何费用，请放心使用。后续定期提供更新及维护，可供参考与学习， 预览 vue-vben-admin-预览 仓库 gitHub ...
vue-vben-admin的权限管理
Sb1784591708的博客
09-25 640
权限接口位置：import { getMenuList } from ‘@/api/sys/menu’;权限接口调用位置，详细代码见：/@/store/modules/permission.ts。
vben admin 后端路由 角色 菜单 配置
qq_24953751的博客
01-06 2431
1.第一步，先给相应改成后端路由 默认permissionMode: PermissionModeEnum.ROUTE_MAPPING,这里有个地方需要注意 在meta 配置setHideMenu(true);代表不在菜单显示，但是可以通过按钮请求到。以上是路由的配置，有不懂的可以qq：929089727 李森源。下面：当前用户对应的按钮 拼接成string数组就可以了。格式例子： ['新增', '修改', '删除']这样前端就基本完成了，接下来看后端的。第二步就是配置按钮权限了，
读vben2-理解一个项目的路由、菜单、权限控制
最新发布
weixin_44667515的博客
02-05 328
背景：以下为个人的粗糙理解，捋清楚在开发中的大致思路。有了正确的思路，实现它就不是问题。欢迎指正，更多细节慢慢填充。
修改最新版 Vben Admin 通过后端服务器API加载动态菜单
Dreamcode ~ All in AI
06-16 1530
修改最新版 Vben Admin 通过后端服务器API加载动态菜单
基于Vben+Admin+Ts+AntDesign+vite+Vue3框架遇到的问题，以及组件的使用
WhoopD的博客
08-24 3137
vben+admin框架中使用场景
第六节：Vben Admin权限-后端控制方式
cui_win的专栏
03-01 1824
上一节，我们了解了Vben Admin前端控制方式权限的实现方式。并手动创建了一个路由和菜单，最后，通过结合用户角色，可以控制菜单的显示和隐藏。本节，我们开始实践Vben Admin后端控制方式生成权限。这节，我们把权限模式改成了BACK了，通过实现getPermCode接口，再次打开的工作台。经过前几节内容，我们已经快摸清楚Vben Admin的权限了。
vben后台根据权限返回自定义路由
muitoprazer的博客
04-24 879
vben后台根据权限返回自定义路由
vben admin路由跳转拿不到param参数问题
清澈明朗 积极向上
03-22 840
vben admin路由跳转拿不到param参数问题解决方案
第三节：Vben Admin登录对接后端login接口
cui_win的专栏
02-25 3056
上一节，我们梳理的Vben Admin登录功能接口的逻辑，本节开始正式开启后端的开发后端我们采用Python的Flask项目，Flask-SQLAlchemy管理数据库模型，Flask-Migrate进行模型迁移。参考版本如下：Flask3.0.23.1.1本节，我们已经开启的后端的开发，因为是主要介绍Vben Admin的登录逻辑，所以Flask开发这里只截取了部分主要代码。
第五节：Vben Admin权限-前端控制方式
cui_win的专栏
02-27 2544
上一节，我们完成了登录功能，已经顺利登录到工作台页面。在工作台页面可以看到左侧已经存在了一些路由菜单。本节我们首先要分析下路由的来龙去脉。本节我们分析了Vben Admin路由生成的原理，手动生成了一段路由并自动转菜单。结合登录用户的角色，控制了菜单的显示和隐藏。
vben admin 2.路由权限、前置守卫循环重定向死循环问题
郝开的博客
05-25 4024
vben admin 路由权限、前置守卫循环重定向死循环问题vue导航守卫vue路由权限全局前置守卫使用方法vue Router 方法 addRoutevben admin搜索addRoute定位路由文件setupRouterGuardcreatePermissionGuardrouter.beforeEach前置守卫白名单的作用：避免前置守卫循环重定向导致死循环router.addRoute添加路由权限getMenuList()获取菜单 vue路由权限思路都是基于导航守卫，然后addRoute添加权限去做
第二节：Vben Admin 登录逻辑梳理和对接后端准备
cui_win的专栏
02-23 3551
第一节，我们已经配置了前端环境，运行起来了我们的Vben Admin的项目。本节内容，我们先熟悉下项目的目录和文件，然后开始准备对接后端程序路由在 src/router页面在 sr/views本节前端登录逻辑梳理完成了，后端只要在/api/login 接口编写返回逻辑，前后段就可以打通了，具体详情我们下一节介绍。
越用越爽的后台框架开发纪实-2----VbenAdmin,登录接口对接
weiyang_86的博客
06-11 1852
3、在对接口的时候我遇到了一个小问题，前端一直抓不到数据，总是undifined，然后这个可能大家也会遇到，分享给大家就是在接口调用类defHttp，当中的正确返回码的接口和我们现在用的框架不匹配，就是框架使用的code:0是接口调用成功返回，而我们后台写的是code:200,这里要做一点点小小的更改：在定义类的文件中第58行，找到定义ResultEnum.SUCCESS的文件，修改为接口一致的就可以了。这个地方是填写你自己的调用接口使用的，关闭了mock的话，就要填写自己的后台接口写在这里。
Vue-Vben-Admin：中大型项目后台解决方案及如何实现页面反向传值
chenchuang0128的博客
03-13 1579
Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue和TypeScript的开源项目，旨在为开发中大型项目提供一站式的解决方案。随着技术的不断更新与发展，我们有理由相信，Vue-Vben-Admin将会在未来的企业级开发中发挥越来越重要的作用。基于Vue3.0、Vite和Ant-Design-Vue：Vue-Vben-Admin采用了最新的Vue3.0框架，结合Vite构建工具和Ant-Design-Vue组件库，为开发者提供了一个高效且易于维护的开发环境。
Go+Vben Admin框架初体验
m0_51767575的博客
08-29 2608
Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台。整体封装度很高，拓展性也很强，没有在精简版上进行开发，主要还是想通过这套框架去熟悉一下 TypeScript 以及学习框架本身一些好的写法和思想。...
后台权限控制及动态路由
桂林电子科技大学 -芳
04-12 468
如果用户id为1代表管理员，roles 中只需要有admin，permissions中需要有所有菜单类型为C或者F的，状态为正常的，未被删除的权限。如果用户id为1代表管理员，menus中需要有所有菜单类型为C或者M的，状态为正常的，未被删除的权限。建表SQL及初始化数据见：SGBlog\资源\SQL\sg_menu.sql。前端为了实现动态路由的效果，需要后端有接口能返回用户所能访问的菜单数据。后台系统需要能实现不同的用户权限可以看到不同的功能。//此次省略1000字。"msg":"操作成功"
Vben Admin配置菜单
04-29
好的，关于Vben Admin配置菜单，我可以为您提供一些基本的信息。Vben Admin是一款基于Vue3和TypeScript的后台管理系统框架，可以快速搭建一套完整的后台管理系统。在Vben Admin中，配置菜单的方式是通过在路由配置文件中定义路由信息，然后在菜单组件中根据路由信息动态生成菜单。具体步骤如下： 1. 在路由配置文件中定义路由信息，包括路由路径、组件、菜单名称等信息。 2. 在菜单组件中读取路由配置文件中的信息，并根据信息生成菜单。 3. 在生成菜单时，可以根据路由信息的meta字段中的信息，来决定是否显示菜单、菜单的图标等信息。 4. 可以通过修改路由配置文件中的信息，来动态修改菜单的内容和结构。 希望这些信息能够对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值