第五节：Vben Admin权限-前端控制方式

已于 2024-05-03 20:10:54 修改
阅读量3k 收藏 32
点赞数 20
CC 4.0 BY-SA版权
分类专栏： Vben Admin框架实战(Python Flask后端) 文章标签： 前端 anti-design-vue vue flask vben admin 前后端分离
于 2024-02-27 18:15:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cui_win/article/details/136287630
本文详细介绍了Vben Admin前端权限控制的实现，包括菜单来源分析、手动添加路由、路由多语配置、页面文件创建以及如何结合角色生成和控制菜单显示。通过实例展示了如何通过前端方式实现权限管理。

系列文章目录

基础篇
第一节：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实战-系统管理之用户管理
第十三节：Vben Admin实战-系统管理之菜单管理

专栏链接
Vben Admin框架实战(Python后端)

文章目录

前言

上一节，我们完成了登录功能，已经顺利登录到工作台页面。在工作台页面可以看到左侧已经存在了一些路由菜单。本节我们首先要分析下路由的来龙去脉。

一、Vben Admin权限分析

Vben Admin的项目文档部分，有权限的介绍 传送门
这里我们分别展开分析下，前端角色和后端动态获取模式下，分别如何使用权限，进行项目开发。

项目中集成了三种权限处理方式：

  • 通过用户角色来过滤菜单(前端方式控制)，菜单和路由分开配置
  • 通过用户角色来过滤菜单(前端方式控制)，菜单由路由配置自动生成
  • 通过后台来动态生成路由表(后台方式控制)

查看当前权限模式：目前默认是Route_Mapping方式，即第二种。
在这里插入图片描述

菜单从何而来

我们登陆进去工作台后，左侧会自动显示很多的菜单，这些菜单是如何自动生成出来的呢，带着这个问题，我们分析下。
在我们登陆后，除了请求了用户getUserInfo接口，同时还触发了permissionStore.buil

了解本专栏 订阅专栏 解锁全文 超级会员免费看
第十四节：Vben Admin实战-系统管理之角色菜单绑定
cuiwin的专栏
08-02 817
权限管理部分，目前已经实现了角色，用户，菜单的管理，现在还剩余一个重要的部分，是角色和菜单的动态绑定。Vben Admin 演示案例部分，是在角色管理的抽屉弹出框实现的，但是感觉展示不够直观，我们这里用一个单独的页面实现这部分的功能。src/api/sys/role.ts 文件中定义：# 角色菜单关联表现在权限管理部分的功能基本已经都实现了，还记得第七节：Vben Admin权限-后端获取路由和菜单。
第六节：Vben Admin权限-后端控制方式
cuiwin的专栏
03-01 2187
上一节，我们了解了Vben Admin前端控制方式权限的实现方式。并手动创建了一个路由和菜单，最后，通过结合用户角色，可以控制菜单的显示和隐藏。本节，我们开始实践Vben Admin后端控制方式生成权限。这节，我们把权限模式改成了BACK了，通过实现getPermCode接口，再次打开的工作台。经过前几节内容，我们已经快摸清楚Vben Admin的权限了。
Vue Vben Admin 5.0：基于Vue3的现代化中后台管理框架深度解析—拥抱前沿技术，赋能高效开发
最新发布
chenchuang0128的博客
10-26 947
在前端技术快速迭代的今天，中后台管理系统的开发需求日益增长。如何选择一款高性能、易扩展且符合现代技术标准的框架，成为开发者关注的焦点。无论是快速搭建企业级应用，还是深入学习 Vue3 生态，它都是值得尝试的优质选择。本文将从技术架构、核心特性、开发体验及贡献指南等角度，全面解析这一现代化管理框架的独特价值。：无论是提交 Issue、优化文档，还是贡献代码，你的每一份努力都将推动框架进化！：提供完整的路由、权限、国际化等中后台核心功能，降低开发门槛；：从组件到工具函数，全链路类型安全，减少低级错误；
第十五节 基于RBAC的权限管理VbenAdmin前端实现
F_angT的博客
09-19 1687
第三节中我们实现利用spring security实现了基于RBAC的权限管理，并且通过Method的设计实现了Restful风格的接口设计。接下来基于之前设计，我们在VbenAdmin上进行实现。此次对前后端的修改都比较多，所以花了不少时间，以下就几个关键点进行说明，其他的代码可以直接到github上下载。Vben的前端预留界面还是不错的，直接用就行对于递归的理解是菜单管理的关键。
Vue-Vben-Admin 权限系统深度解析与实战指南
gitblog_00030的博客
06-01 708
Vue-Vben-Admin 权限系统深度解析与实战指南 【免费下载链接】vue-vben-admin vbenjs/vue-vben-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统，支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统，可以方便地实现数据的查询和管理，同时支持多...
Vue Vben Admin权限管理系统深度剖析
gitblog_00951的博客
08-23 730
Vue Vben Admin权限管理系统深度剖析 【免费下载链接】vue-vben-admin vbenjs/vue-vben-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统，支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统，可以方便地实现数据的查询和管理，同时支持多种数据库...
Abp Vnext Vue版本(Vben Admin5.0)
weixin_40869758的博客
11-23 793
前言 之前有提供免费开源的基于vben2.8版本的abp vnext pro版本 abp vnext pro vben admin 2.8 vben2.8作者已经重构一个版本，命名为vben5，而vben2.x 目前已存档，仅进行重大问题修复。所以abp vnext pro vue版本前端也重新升级。 新版本(vben5)与旧版本(vben2.8)不兼容。 相对于vben2.8版本，vben...
第七节：Vben Admin权限-后端获取路由和菜单
cuiwin的专栏
03-13 2659
这段时间比较忙，更新暂停了一些天，今天我们继续。上一节，我们切换了权限方式为BACK模式，分析了getPermCode接口。最后我们遇到了/api/getMenuList接口404。这节我们就编写后端对应的/api/getMenuList接口到这里，我们已经实现了后端权限控制模式下的前后端对接。后面的优化方向主要就是如何存储权限和用户数据，用数据库将权限数据保存和查询。
第九节：Vben Admin实战-系统管理之角色管理实现-上
cuiwin的专栏
03-17 2641
之前的章节，主要侧重对Vben Admin的了解，后端代码主要是模拟的Json数据，从本节开始，我们要侧重后端的代码，结合数据库进行系统权限的管理。本节主要介绍角色管理模块的增删改查。这节主要是摸索，Vben Admin 在实际使用过程中如何和后端接口打通，目前只简单实现了添加功能，后面还需要补充分页查询，修改，删除等功能。
vue-vben-admin的权限管理
Sb1784591708的博客
09-25 1108
权限接口位置：import { getMenuList } from ‘@/api/sys/menu’;权限接口调用位置，详细代码见：/@/store/modules/permission.ts。
一， 前端架构Vben页面结构源码分析
bbill的博客
01-18 1682
本文总结vben,jeecgboot前端页面登录前后过程，帮助学习源码，定位问题，扩展功能，避坑
【前端】Vue-Vben-Admin 项目详细教程
保持前进，即便速度慢，也不能停下脚步...
03-27 7045
Vue-Vben-Admin 是一个基于 Vue3.0、Vite、Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。该项目集成了多种先进技术，如 Pinia 作为状态管理工具、Vue Router 作为路由管理工具，并通过 Shadcn UI 提供了一套现代化的 UI 组件。它具有强大的扩展性和模块化特性，无论是开发中小型项目，还是大型企业级应用，都能够提供一个强大、灵活、可扩展的管理后台框架。├── build/ # 打包脚本相关。
Go+Vben Admin框架初体验
m0_51767575的博客
08-29 2946
Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台。整体封装度很高，拓展性也很强，没有在精简版上进行开发，主要还是想通过这套框架去熟悉一下 TypeScript 以及学习框架本身一些好的写法和思想。...
#study-vben-admin-5.4.6 （安装依赖，启动项目，探索路由）
c1728733689的博客
11-19 1738
【99.1番外篇·Vben5·路由初探】https://www.bilibili.com/video/BV1yn1CY7Ena?在modules创建test.ts,并添加两个测试页面test1,test2。在src/router/routes/views下创建页面文件夹sys。路由在 src/router/routes/modules。下面是role下 index.vue的内容。下面是user下 index.vue的内容。我在modules下面添加了sys.ts。安装pnpm依赖进行管理。
第三节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 对接后端登录接口(上)
cuiwin的专栏
05-06 1407
这里是Vben Admin V5版本实战体验，上一节我们前端已正常运行，但是没有实现登录。本节的重点是对接后端接口。上一节地址：第一节：Vben Admin 最新 v5.0初体验第二节：Vben Admin 登录逻辑梳理和对接后端准备后端我们采用Python的Flask项目，Flask-SQLAlchemy管理数据库模型，Flask-Migrate进行模型迁移。参考版本如下：Flask3.0.23.1.1到这里，登录接口完成，下一步要实现获取用户信息和权限的接口功能。
vben后台根据权限返回自定义路由
muitoprazer的博客
04-24 1337
vben后台根据权限返回自定义路由
第一节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门
cuiwin的专栏
04-17 4900
vben5 快速入门。 Vben Admin 框架新出的版本V5.5.4，而之前的Vben Admin 2.x 目前已存档，仅进行重大问题修复。之前在2.x版本曾经简单完成了一版专栏文章，当时也是收获了一些好评和建议。本次决定在v5 版本基础上再完成一次前后端的搭建。希望大家继续多多支持。项目精简后，再次启动项目，执行 pnpm run dev点击登录，可以看到接口报错，现在前端请求的后端有报错，下一节处理这部分逻辑。
【亲测免费】 探索未来前端：Vben3框架深度解析
gitblog_00053的博客
04-27 1111
探索未来前端：Vben3框架深度解析 是一个基于Vue3构建的企业级后台管理系统模板，旨在提供一套完整、高效的前端解决方案。本文将深入探讨其技术特性、应用场景和优势，帮助开发者更好地理解和利用这一优秀项目。 项目简介 Vben3以简洁优雅的设计风格和强大的功能特性，为开发高质量企业应用提供了便利。它融合了Ant Design Vue的设计哲学，并充分利用Vue3的新特性，如Composition ...
Vben Admin v5 Python-Flask后端开发详解与源码解析
Vben Admin v5（简称vben5）是一款基于Vue 3 + Vite + TypeScript构建的现代化中后台前端框架，广泛应用于企业级管理系统、权限控制平台和数据可视化项目中。而本节所聚焦的内容是“Vben Admin v5 的 Python-Flask ...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值