vue+element-ui实现动态的权限管理和菜单渲染_权限设置ui

需求:需要根据不用的用户匹配不同的管理权限,既:匹配不同的操作导航,尤其体现在后台管理系统内,如果仅仅只是在导航菜单内不予显示,仍然是可以通过路径直接打开页面,因为其路由信息已经在路由信息对象(new Router({}))函数中进行了注册

当然 这里可以通过全局导航守卫来区分不同的用户,允许其进入不同的路径,但是这只能进行简单的权限判断,且前端已经写死,灵活性不高,不能针对每个用户,做定制化权限区分

项目地址:github.com/cgq001/vue-…

欢迎star, 留着也许就用到了,毕竟权限管理 还是很普遍的嘛

使用到的规则

1、动态设置权限的UI展示

这里使用element-ui的Three树形控件,数据结构如下:

data: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}]
复制代码

这里选择这个树形控件,是因为其数据结构和我们的 注册路由信息结构十分接近,不需要再重新修改路由信息的数据结构,即可完美的 展现在 Three树形控件里

2、将侧边导航所需要的路由信息对象 抽离成一个数组,根据后台返回的数组,筛选出对应的路由信息,通过addRoutes添加到路由信息对象里,即可完成路由信息的动态添加

详情
// 在router.js 路由文件 新建数组路由存储 '/'  父路由下的所有子路由(这里所有的动态路由均为 '/' 的子路由)
let routerLists=[ {id:1,path: '',label: '首页',redirect: '/index',  //重定向到meta:{title: '首页',table: true,display: false,icon: 'el-icon-s-home'}},{id: 2,path: '/index',   name: 'index',label: '首页',component: _import('Index/Index'),meta:{title: '首页',table: true,display:true,icon: 'el-icon-s-home'}},{id: 3,path: '/shop',name: 'shop',label: '商品管理',component: _import('Shop/Shop'),meta:{title: '商品列表',table: true,display:true,icon: 'el-icon-s-operation'}},{id:20,path: '/admin',label: '管理员列表',component: _import('admin/index'),meta:{title: '管理员列表',table: true,display:true,icon: 'el-icon-s-custom'},children:[{id:21,path: '/admin/index',label: '管理员列表',component: _import('admin/admin'),meta:{title: '管理员列表',table: true,display:true,icon:'el-icon-tickets'}},{id:22,path: '/admin/adminlist',label: '添加管理员',component: _import('admin/adminlist'),meta:{title: '添加管理员',table: true,display:true,icon:'el-icon-document-remove'}}]}
]//定义 上面数组的父路由
let routerAlls=[   //这里为routerLists的父路由{path: '/',component: Home}
]1 .权限配置表
// 先把路由信息对象字符串化,然后去除component字段 ,再传递给 权限配置表let routerListString =JSON.stringify(routerLists)let src= routerListStr(routerListString)store.commit('serRouterList',src)let arr=[1,2,3,20,21,22]   //这里为权限列表数组(既后台根据用户身份返回的对应的路由数组)//根据权限配置表(arr数组)和动态路由信息对象(routerLists数组) 获取本用户的路由信息表,并添加到 routerAlls 路由的二级路由里2.获取动态路由routerAlls[0].children = routerListFun(arr,routerLists)  
//获取 路径 '/' 的子路由,并添加至 routerAlls   这里的  routerListFun函数 为 根据权限列表数组(arr)筛选动态路由信息对象(routerLists) PS:函数内容见 文章末尾:附录3.获取侧边导航栏 的 渲染菜单 数组//根据权限配置表数组(arr)和动态路由信息对象(routerLists) 获取本用户的菜单列表
let mentParse =JSON.parse(JSON.stringify(src))
let menuList = routerListFun(arr,mentParse)   //这里routerListFun函数注意去除返回数组中的component
store.commit('setMents',menuList)   //将其添加到vuex  // 注册路由
let routers =new Router({mode: 'history',// base: process.env.BASE_URL,routes: [{path: '/loading',name: 'loading',component: () => import('../views/Load/Loading.vue'),meta:{title: '登陆',table: false}}]
})// 将筛选后的路由信息对象添加至路由表
routers.addRoutes(routerAlls)// 进行全局导航守卫
routers.beforeEach((to,from,next)=>{if(to.path != '/loading'){let username=store.state.load.userList.usernameif(username){next()}else{next({path:'/loading',query:{path:to.path}}) }}else{next()}   
})export default routers;
复制代码
附录

1.动态路由书写规则

* 路由书写规则*    1、只有一级路由(实际为二级路由):*     {id: 2,                                  //ID全局不能重复path: '/index',                         //路由路径 全局不能重复name: 'index',                          //名字,全局不能重复,存在二级路由,则一级路由不能有名字label: '首页',                          // 页面名称(用于权限配置时 显示名称使用)component: _import('Index/Index'),      // 文件地址(此处对应的是views目录)meta:{title: '首页',                        //页面名称(横向teble标签切换)table: true,                          // 是否显示 teable 切换按钮display:true,                         //  是否在侧边导航菜单显示icon: 'el-icon-s-home'                //  侧边导航的icon图标}}2、包含二级路由(实际为三级路由){id:20,                                  //ID全局不能重复path: '/admin',                         //路由路径 全局不能重复(此处为父级))label: '管理员列表',                     // 页面名称(用于权限配置时 显示名称使用)component: _import('admin/index'),      // 文件地址(此处对应的是views目录)注意:此文件下 应包含(router-view 标签 来显示子页面)meta:{title: '管理员列表',                   //页面名称(横向teble标签切换)table: true,display:true,                         //  是否在侧边导航菜单显示(注意 这里是父级,如果为false,则子级不在折叠)### 总结秋招即将开始,校招的朋友普遍是缺少项目经历的,所以**底层逻辑,基础知识要掌握好!**而一般的社招,更是神仙打架。特别强调,项目经历不可忽视;几乎简历上提到的项目都会被刨根问底,所以项目应用的技术要熟练,底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 **HTML,CSS,JavaScript,HTTP,TCP协议,浏览器,Vue框架,算法**等高频考点**238道(含答案)**!  资料截图 :![](https://img-blog.csdnimg.cn/img_convert/edeaa71cbc745698bdedcfe65be40387.png)![](https://img-blog.csdnimg.cn/img_convert/981487b285a8b90918f35c830c299df8.png)![](https://img-blog.csdnimg.cn/img_convert/9866daffbebcf87b44d9530a59427834.png)**高级前端工程师必备资料包**  ![](https://img-blog.csdnimg.cn/img_convert/ba803e1b69e399b6739e3d33554d42a7.png)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/34142.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单使用百度地图

官方文档 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content

统计每2个小时时间段的设备各种状态时长,使用SQL做数据分析,“查表法”“表驱动法”使用案例分析

“表驱动法”是一种编程设计模式。 使用一个表&#xff08;使用数据结构&#xff0c;如数组、字典&#xff0c;Map等&#xff09;来存储和关联相关的数据和行为。 通过“查表”来根据输入参数&#xff0c;确定相应的处理逻辑或结果&#xff0c;从而减少使用大量的条件判断语句…

执行shell脚本出现 $‘ \r‘ 符号导致执行失败【解决】

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;CSDN博客专家   &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01…

深信服AC行为管理报错

报错信息&#xff1a; e0:alarmevent.cpp:54 exec cmd: /ac/common/app/kvupd -v failed 说明&#xff1a; 截止到上网行为管理12.0.80及全网行为管理13.0.102版本&#xff0c;AC凌晨&#xff08;0点-7点&#xff09;会重启进程让设备更好的运行&#xff0c;凌晨重启告警属于正…

Leetcode刷题(四十二)

美丽下标对的数目&#xff08;Easy&#xff09; 给你一个下标从 0 开始的整数数组 nums 。如果下标对 i、j 满足 0 ≤ i < j < nums.length &#xff0c;如果 nums[i] 的 第一个数字 和 nums[j] 的 最后一个数字 互质 &#xff0c;则认为 nums[i] 和 nums[j] 是一组 美丽…

unity基础 常用的API及脚本模板

对于刚学unity的新手&#xff0c;c#脚本基础尤为重要&#xff0c;一文带你搞定一些简单实用的小脚本&#xff0c;让你轻松入门。 常用的API &#xff08;部分源于网络&#xff0c;侵权滴删&#xff09; 1.Transform Transform是用于控制游戏对象位置、旋转和缩放的组件。其AP…

android 彩虹进度条自定义view实现

实现一个彩虹色进度条功能&#xff0c;不说明具体用途大家应该能猜到。想找别人造的轮子&#xff0c;但是没有合适的&#xff0c;所以决定自己实现一个。 相关知识 android 自定义view LinearGradient 线性渐变 实现步骤 自定义view 自定义一个TmcView类继承View 重写两…

SpringBoot系列之搭建WebSocket应用

SpringBoot系列之@ServerEndpoint方式开发WebSocket应用。在实时的数据推送方面,经常会使用WebSocket或者MQTT来实现,WebSocket是一种不错的方案,只需要建立连接,服务端和客户端就可以进行双向的数据通信。很多网站的客户聊天,也经常使用WebSocket技术来实现。 WebSocket…

npm error code EUNSUPPORTEDPROTOCOL 解决

更换包管理工具 npm i -g pnpm pnpm install pnpm run dev 参考 https://blog.csdn.net/qq_42592823/article/details/137541827

Mac角色扮演游戏推荐:仙剑奇侠传四 for Mac 安装包

《仙剑奇侠传四》拥有精美的画面、优秀的音乐和丰富的剧情内容&#xff0c;成为了仙剑系列中的经典作品之一。游戏在发行后获得了极高的口碑和销量&#xff0c;成为了仙剑系列中的经典之作。在游戏中&#xff0c;玩家将扮演不同的角色&#xff0c;进行冒险探索、与各种敌人战斗…

# bash: chkconfig: command not found 解决方法

bash: chkconfig: command not found 解决方法 一、chkconfig 错误描述&#xff1a; 这个错误表明在 Bash 环境下&#xff0c;尝试执行 chkconfig 命令&#xff0c;但是系统找不到这个命令。chkconfig 命令是一个用于管理 Linux 系统中服务的启动和停止的工具&#xff0c;通常…

2024 年网站分析必备:Fullstory、APILayer 及 Openinstall API 服务

在当今数字化的时代&#xff0c;网站和应用的成功运营离不开对用户行为和网站性能的深入洞察。2024 年的今天&#xff0c;随着技术的不断发展&#xff0c;各种先进的 API 服务应运而生&#xff0c;为我们提供了强大的工具来优化用户体验、保障网站可用性以及提升 App 推广效果。…

Linux编译器 gcc/g++

gcc/g的简介 GCC&#xff08;英文全拼&#xff1a;GNU Compiler Collection&#xff09;是 GNU 工具链的主要组成部分&#xff0c;是一套以 GPL 和 LGPL 许可证发布的程序语言编译器自由软件&#xff0c;由 Richard Stallman 于 1985 年开始开发。gcc是GCC中的C语言编译器&…

ES6及其后续版本的新特性的理解

ES6及其后续版本&#xff08;如ES7、ES8等&#xff09;的新特性的理解 ES6&#xff08;ECMAScript 2015&#xff09;引入了一系列重要的语言和语法特性&#xff0c;旨在提升JavaScript的简洁性和可读性。后续的ES7、ES8等版本继续扩展了这些特性。以下是一些关键新特性&#x…

爱迪特两年创业板上市路:销售费用率远高同行,侵权风险引关注

《港湾商业观察》施子夫 王璐 从2022年4月7日就冲刺创业板的爱迪特&#xff08;秦皇岛&#xff09;科技股份有限公司&#xff08;以下简称&#xff0c;爱迪特&#xff09;&#xff0c;预计将很快登陆资本市场。 爱迪特日前披露中签结果&#xff1a;本次发行股份数量为约1902…

关于最强模型Claude 3.5 Sonnet,你需要知道的10条总结!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,所以创建了“AI信息Gap”这个公众号,专注于分享AI全维度知识,包括但不限于AI科普,AI工具测评,AI效率提升,AI行业洞察。关注我,AI之…

Python自动化(8)——pyqt5界面

Python自动化(8)——pyqt5界面 注意&#xff1a;pyqt5的界面使用时必须有app QApplication(sys.argv)这行代码&#xff0c;否则会出现错误并且无法显示窗口&#xff1a;QWidget: Must construct a QApplication before a QWidget 一些基础的控件 QMainWindow QMainWindow是…

Java NIO Buffer概念

针对每一种基本类型的 Buffer &#xff0c;NIO 又根据 Buffer 背后的数据存储内存不同分为了&#xff1a;HeapBuffer&#xff0c;DirectBuffer&#xff0c;MappedBuffer。 HeapBuffer 顾名思义它背后的存储内存是在 JVM 堆中分配&#xff0c;在堆中分配一个数组用来存放 Buffe…

【经验分享】免费版虚拟机VMware Workstation Pro 17下载方式

【经验分享】免费版虚拟机VMware Workstation Pro 17下载方式 前言一、免费虚拟机下载方式二、 安装过程总结 前言 我真的是服了&#xff0c;现在的CSDN时效性为什么这么差了。都快一个月了还没有博主更新个人免费版虚拟机VMware Workstation Pro&#xff0c;甚至很多人还不知…

【运维】使用 Docker Compose 快速启动项目全流程指南

文章目录 docker-compose启动项目流程1. 安装 Docker 和 Docker Compose2. 准备 Docker Compose 文件3. 启动 Docker Compose 服务4. 检查运行状态5. 停止服务示例 docker-compose.yaml 文件 为什么要用docker-compose1. 微服务架构的实现2. 依赖管理3. 简化开发和测试环境4. 方…