第六节：Vben Admin权限-后端控制方式

已于 2024-05-03 20:11:40 修改
阅读量1.9k 收藏 19
点赞数 15
分类专栏： Vben Admin框架实战(Python后端) 文章标签： vue anti-design-vue 前端 flask vben admin 后台管理系统
于 2024-03-01 22:50:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cui_win/article/details/136406324
版权
本节介绍Vben Admin后端控制权限的方式，包括切换到BACK模式，分析getPermCode接口，实现该接口以返回角色权限码，并解决登录后的菜单显示问题。通过这一过程，逐步理解Vben Admin的权限管理机制。

摘要生成于 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 最新 v5.0初体验
cui_win的专栏
04-17 448
Vben Admin 框架新出的版本V5.5.4，而之前的Vben Admin 2.x 目前已存档，仅进行重大问题修复。之前在2.x版本曾经简单完成了一版专栏文章，当时也是收获了一些好评和建议。本次决定在v5 版本基础上再完成一次前后端的搭建。希望大家继续多多支持。项目精简后，再次启动项目，执行 pnpm run dev点击登录，可以看到接口报错，现在前端请求的后端有报错，下一节处理这部分逻辑。
Vben Admin后台管理系统的开箱使用（适合小白）
qq_58671311的博客
04-04 3474
Vben Admin后台管理系统
vue-vben-admin的权限管理
Sb1784591708的博客
09-25 755
权限接口位置：import { getMenuList } from ‘@/api/sys/menu’;权限接口调用位置，详细代码见：/@/store/modules/permission.ts。
第七节：Vben Admin权限-后端获取路由和菜单
cui_win的专栏
03-13 2231
这段时间比较忙，更新暂停了一些天，今天我们继续。上一节，我们切换了权限方式为BACK模式，分析了getPermCode接口。最后我们遇到了/api/getMenuList接口404。这节我们就编写后端对应的/api/getMenuList接口到这里，我们已经实现了后端权限控制模式下的前后端对接。后面的优化方向主要就是如何存储权限和用户数据，用数据库将权限数据保存和查询。
第二节：Vben Admin 登录逻辑梳理和对接后端准备
cui_win的专栏
02-23 3868
第一节，我们已经配置了前端环境，运行起来了我们的Vben Admin的项目。本节内容，我们先熟悉下项目的目录和文件，然后开始准备对接后端程序路由在 src/router页面在 sr/views本节前端登录逻辑梳理完成了，后端只要在/api/login 接口编写返回逻辑，前后段就可以打通了，具体详情我们下一节介绍。
vben admin 后端路由 角色 菜单 配置
qq_24953751的博客
01-06 2513
1.第一步，先给相应改成后端路由 默认permissionMode: PermissionModeEnum.ROUTE_MAPPING,这里有个地方需要注意 在meta 配置setHideMenu(true);代表不在菜单显示，但是可以通过按钮请求到。以上是路由的配置，有不懂的可以qq：929089727 李森源。下面：当前用户对应的按钮 拼接成string数组就可以了。格式例子： ['新增', '修改', '删除']这样前端就基本完成了，接下来看后端的。第二步就是配置按钮权限了，
vben后台根据权限返回自定义路由
muitoprazer的博客
04-24 976
vben后台根据权限返回自定义路由
第五节：Vben Admin权限-前端控制方式
cui_win的专栏
02-27 2642
上一节，我们完成了登录功能，已经顺利登录到工作台页面。在工作台页面可以看到左侧已经存在了一些路由菜单。本节我们首先要分析下路由的来龙去脉。本节我们分析了Vben Admin路由生成的原理，手动生成了一段路由并自动转菜单。结合登录用户的角色，控制了菜单的显示和隐藏。
第三节：Vben Admin登录对接后端login接口
cui_win的专栏
02-25 3195
上一节，我们梳理的Vben Admin登录功能接口的逻辑，本节开始正式开启后端的开发后端我们采用Python的Flask项目，Flask-SQLAlchemy管理数据库模型，Flask-Migrate进行模型迁移。参考版本如下：Flask3.0.23.1.1本节，我们已经开启的后端的开发，因为是主要介绍Vben Admin的登录逻辑，所以Flask开发这里只截取了部分主要代码。
第四节：Vben Admin登录对接后端getUserInfo接口
cui_win的专栏
02-25 2119
上一节，我们完成了/api/auth/login接口的创建，通过login接口，我们完成了登录和Token的生成。但是登陆还是报404返回，发现是Vben Admin又请求了一个/api/getUserInfo接口，本节我们就来分析完成这个接口本节，我们完成了getUserInfo接口，完成了登录操作，成功的进入到工作台页面。
Vue-Vben-Admint：打造高效、美观的后台管理系统
理论都是虚的，代码才是王道。
10-25 905
在现代Web开发中，前后端分离已经成为了一种趋势。本文将详细介绍如何使用Vue-Vben-Admint这个优秀的开源项目搭建一个高效、美观的后台管理系统。我们将通过详细的操作步骤和代码示例，帮助你快速掌握Vue-Vben-Admint的使用方法。首先，我们需要在你的计算机上安装Node.js和npm。请访问Node.js官网下载并安装适合你操作系统的版本。一、安装Node.js和npm。按照提示完成安装过程。四、编写组件和页面布局。
VbenAdmin+Django前后端逻辑梳理
zhulianseu的专栏
05-23 641
因为后端的Django的接口默认在8000端口，api关键字是Django中定义的。如：前端发送的请求会默认转去后端这个接口。
Vben Admin+Element-plus的Go版本管理后台
soryetong
03-19 298
基于 vue-vben-admin (Element-plus) +后端 Go(Gin、gorm) 实现的管理后台，实现了用户、菜单、角色、API 权限管理；后端接口可快速移植至老项目中。后端使用Go+Gin实现，配合Casbin实现了接口的权限验证。
修改最新版 Vben Admin 通过后端服务器API加载动态菜单
Dreamcode ~ All in AI
06-16 1636
修改最新版 Vben Admin 通过后端服务器API加载动态菜单
Go+Vben Admin框架初体验
m0_51767575的博客
08-29 2667
Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台。整体封装度很高，拓展性也很强，没有在精简版上进行开发，主要还是想通过这套框架去熟悉一下 TypeScript 以及学习框架本身一些好的写法和思想。...
越用越爽的后台框架开发纪实-2----VbenAdmin,登录接口对接
weiyang_86的博客
06-11 2021
3、在对接口的时候我遇到了一个小问题，前端一直抓不到数据，总是undifined，然后这个可能大家也会遇到，分享给大家就是在接口调用类defHttp，当中的正确返回码的接口和我们现在用的框架不匹配，就是框架使用的code:0是接口调用成功返回，而我们后台写的是code:200,这里要做一点点小小的更改：在定义类的文件中第58行，找到定义ResultEnum.SUCCESS的文件，修改为接口一致的就可以了。这个地方是填写你自己的调用接口使用的，关闭了mock的话，就要填写自己的后台接口写在这里。
Vue3+vben admin后台管理系统接口封装
weixin_48156531的博客
05-17 3658
Vue3+vben admin
Vue-Vben-Admin：中大型项目后台解决方案及如何实现页面反向传值
chenchuang0128的博客
03-13 1603
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组件库，为开发者提供了一个高效且易于维护的开发环境。
Vben Admin—— vben-admin BasicTable表格 按钮权限控制的两种方式
qq_43201350的博客
12-14 581
Vben Admin—— vben-admin BasicTable表格 按钮权限控制的两种方式
vben admin登录界面
最新发布
03-25
### 关于 Vben Admin 登录界面实现方式 Vben Admin 是基于 Vue 3 和 TypeScript 构建的一个现代化中后台管理框架，其登录界面的设计充分体现了模块化和可扩展性的特点。以下是有关其实现方式以及如何进行自定义配置的关键点： #### 1. **登录页面结构** Vben Admin 的登录页面位于 `src/views/login` 文件夹下[^4]。该目录通常包含以下几个核心文件： - `index.vue`: 主要负责渲染整个登录页面的布局。 - `components/`: 存放一些子组件，比如验证码输入框、用户名密码输入框等。 这些文件共同协作完成用户的认证流程。 #### 2. **登录逻辑处理** 登录的核心逻辑主要集中在 `src/api/user.ts` 中。这里定义了一个用于提交用户凭证并验证身份的方法，例如 `loginApi` 函数[^5]: ```typescript export function loginApi(params: LoginParams): Promise<UserInfo> { return request({ url: '/auth/login', method: 'POST', data: params, }); } ``` 当用户点击“登录”按钮时，会调用上述方法向服务器发送请求，并接收返回的结果来判断是否成功登录。 #### 3. **状态管理和持久化存储** 为了保存已登录用户的信息（如 token），Vben 使用 Vuex 进行全局状态管理，在 `src/store/modules/user.ts` 定义了一系列 action 来操作 user 数据[^6]。同时也会借助浏览器本地缓存机制（localStorage 或 sessionStorage）保持 session 生命周期内的有效性。 #### 4. **动态路由加载与权限控制** 一旦用户通过了身份验证，则需要依据其所拥有的角色决定可以访问哪些资源路径。这部分功能已经在 `src/store/modules/permission.ts` 实现[^7]，它会从后端拉取当前用户的菜单列表并通过映射转换成前端所需的路由形式。 #### 如何自定义配置？ 如果希望调整默认行为或者增加额外的功能支持，可以从以下方面入手： - 修改样式主题颜色：编辑 `.env.development` 设置变量值覆盖原有配色方案； - 增加第三方社交账号绑定选项：参照官方文档补充 OAuth 流程集成指南； - 更改表单字段校验规则：针对不同业务场景定制化的修改 validation constraints； 总之，得益于高度解耦架构设计思路，开发者能够轻松满足特定需求下的个性化改造诉求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值