vue-vben-admin的权限管理

1.先把基本的功能实现:比如说账号正常登陆、退出;

在这里插入图片描述

2.角色列表增删改查搭建;

在这里插入图片描述

3.菜单列表增删改查搭建;添加目录、菜单、按钮

在这里插入图片描述

4.再给角色列表中的角色分配菜单;

在这里插入图片描述

5.再给账号分配角色;

在这里插入图片描述

6.后台登陆时,请求后台路由权限接口,根据返回的数据结构修改为和框架匹配的数据结构;

权限接口位置:import { getMenuList } from ‘@/api/sys/menu’;
权限接口调用位置,详细代码见:/@/store/modules/permission.ts
在这里插入图片描述

7.在项目配置将系统内权限模式改为 BACK 模式

// ! 改动后需要清空浏览器缓存
const setting: ProjectConfig = {
  // 权限模式
  permissionMode: PermissionModeEnum.BACK,
};
### 关于 `vue-vben-admin` 的教程 #### 项目概述 `vue-vben-admin` 是一个基于 Vue 3.0、Vite、Ant Design Vue 和 TypeScript 构建的现代化后台管理系统的开源框架[^5]。此框架不仅提供了丰富的组件库和支持多种开发需求的功能模块,还特别注重性能优化与用户体验提升。 #### 安装部署指导 对于希望使用 `vue-vben-admin` 来构建应用程序的人来说,可以从官方提供的模板下载链接获取最新版源码[^2]。通过 Git 工具克隆仓库至本地环境后,按照提示完成必要的配置工作即可启动开发服务器进行调试测试。 #### 功能特性详解 - **组件封装**:内置大量高质量UI组件,支持按需加载; - **实用工具**:集成了一系列辅助函数用于简化日常编码任务; - **钩子函数(Hooks)**:遵循 React Hooks 设计理念,允许更灵活的状态管理和副作用处理机制; - **动态菜单&权限验证**:实现了细粒度的角色权限控制系统,能够满足复杂业务场景下的安全需求; - **按钮级别权限控制**:进一步增强了操作层面的安全保障措施; #### 学习资源推荐 为了更好地理解和运用这个强大的前端框架,建议先熟悉以下几个方面的基础知识: - Vue 3.x 版本的新特性和改进之处 - TypeScript 编程语言的基础语法及其优势所在 - Vite 打包工具的工作原理及应用场景说明 - Ant Design Vue 组件的设计哲学和实际案例分析 此外,还可以参考具体的文档资料来加深印象并解决遇到的具体技术难题[^4]。 ```bash # 克隆项目到本地 git clone https://gitcode.com/gh_mirrors/vue/vue-vben-admin.git cd vue-vben-admin npm install # 或者 yarn npm run dev # 启动开发服务 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值