vue3菜单权限管理实现

前提

你的菜单是根据路由动态生成的,具体可以参考这篇博客对el-menu组件进行递归封装(根据路由配置动态生成)

描述

首先将路由分为常量路由constantRoute(所有用户都有的路由)和异步路由asyncRoute(需要动态加载的前端路由)
每次进入系统时根据不同的用户向后端发送请求获取该用户的路由权限信息,一般是个数组。

所使用的API

1.动态添加路由api

router.addRoute(parentName: string, route: RouteConfig): () => void

实现的例子

路由配置信息(大概扫一眼就行,就是v-router的配置)

export const constantRoute = [{path: '/login',component: () => import('@/views/login/index.vue'),name: 'login',meta: {title: '登录',hidden: true,},},{path: '/',component: () => import('@/views/layout/index.vue'),name: 'layout',meta: {title: '',hidden: false,icon: '',},redirect: '/home',children: [{path: '/home',component: () => import('@/views/home/index.vue'),name: 'home',meta: {title: '首页',hidden: false,icon: 'HomeFilled',},},],},{path: '/screen',component: () => import('@/views/screen/index.vue'),name: 'Screen',meta: {title: '数据大屏',hidden: false,icon: 'DataBoard',},},{path: '/404',component: () => import('@/views/404/index.vue'),name: '404',meta: {title: 'Not Found',hidden: true,},},{path: '/:pathMatch(.*)*',redirect: '404',name: 'Any',meta: {title: 'Not Found',hidden: true,},},
]export const asyncRoute = [{path: '/acl',component: () => import('@/views/layout/index.vue'),name: 'Acl',meta: {title: '权限管理',hidden: false,icon: 'Lock',},redirect: '/acl/user',children: [{path: '/acl/user',component: () => import('@/views/acl/user/index.vue'),name: 'User',meta: {title: '用户管理',hidden: false,icon: 'User',},},{path: '/acl/role',component: () => import('@/views/acl/role/index.vue'),name: 'Role',meta: {title: '角色管理',hidden: false,icon: 'Avatar',},},{path: '/acl/permission',component: () => import('@/views/acl/permission/index.vue'),name: 'Permission',meta: {title: '菜单管理',hidden: false,icon: 'List',},},],},{path: '/product',component: () => import('@/views/layout/index.vue'),name: 'Product',meta: {title: '商品管理',hidden: false,icon: 'Goods',},redirect: '/product/trademark',children: [{path: '/product/trademark',component: () => import('@/views/product/trademark/index.vue'),name: 'Trademark',meta: {title: '品牌管理',icon: 'ShoppingCart',hidden: false,},},{path: '/product/attr',component: () => import('@/views/product/attr/index.vue'),name: 'Attr',meta: {title: '属性管理',icon: 'Management',hidden: false,},},{path: '/product/spu',component: () => import('@/views/product/spu/index.vue'),name: 'Spu',meta: {title: 'Spu',icon: 'SetUp',hidden: false,},},{path: '/product/sku',component: () => import('@/views/product/sku/index.vue'),name: 'Sku',meta: {title: 'Sku',icon: 'ScaleToOriginal',hidden: false,},},],},
]
// 计算异步路由信息
function generateRoutes(asyncRoutes: any, filterArr: string[]) {return asyncRoutes.filter((item: any) => {if (filterArr.includes(item.name)) {if (item.children && item.children.length > 0) {item.children = generateRoutes(item.children, filterArr)}return true}})
}
// filterArr 权限信息
const filterArr = ['Acl', 'User', 'Role', 'Product', 'Trademark']
const asyncRoutes = generateRoutes(// 一定要使用深拷贝 用lodash的cloneDeep,不要用JSON的那个cloneDeep(asyncRoute),filterArr,
)
// this.routes主要是侧边导航栏要的信息 可有可无
this.routes = [...constantRoute, ...asyncRoutes,...anyRoute];
// 动态注册路由
[...asyncRoutes,...anyRoute].forEach((item:any) => {router.addRoute(item)
});

注意:如果出现Vue 路由定义警告Component “default“ in record with path “/“ is a Promise这个问题可以尝试在路由前置守卫中加入判断使用next({ ...to })不懂得可以参考这篇

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

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

相关文章

Gradle 插件

自定义Gradle插件 - 简书

小天使的小难题:新生儿疝气的关注与温馨呵护

引言: 新生儿疝气是一种在出生后可能出现的常见情况,虽然通常不会造成长期影响,但对于家长而言,了解如何正确应对新生儿疝气是至关重要的。本文将深入探讨新生儿疝气的原因、症状,以及家长在面对这一问题时应该采取的…

1224. 交换瓶子(蓝桥杯/图论)

题目: 1224. 交换瓶子 - AcWing题库 输入样例1: 5 3 1 2 5 4输出样例1: 3输入样例2: 5 5 4 3 2 1输出样例2: 2 思路:图论 1.将对应的位置与当前的瓶子序列相连形成环。 2.最少交换次数能形成的最多…

Vue中的事件委托(事件代理)使用方法介绍

事件委托(事件代理) 将原本需要绑定在子元素上的事件监听器委托在父元素上,让父元素充当事件监听的职务。 事件委托是一种利用事件冒泡的特性,在父节点上响应事件,而不是在子节点上响应事件的技术。它能够改善性能&a…

如何理解JDK、JRE、JVM区别与联系

摘要:JDK是 Java 语言的软件开发工具包(SDK)。在JDK的安装目录下有一个jre目录,里面有两个文件夹bin和lib,在这里可以认为bin里的就是jvm,lib中则是jvm工作所需要的类库,而jvm和 lib合起来就称为jre。 一、JDK JDK(Ja…

【【迭代16次的CORDIC算法-verilog实现】】

迭代16次的CORDIC算法-verilog实现 -32位迭代16次verilog代码实现 CORDIC.v module cordic32#(parameter DATA_WIDTH 8d32 , // we set data widthparameter PIPELINE 5d16 // Optimize waveform)(input …

第十四章Java博客

lambda就是数学中的“λ”的读音,lambda表达式是基于λ演算而得名的,因为lambda抽象(lambda abstraction)表示一个匿名的函数,于是开发语言也将lambda表达式用来表示匿名函数,也就是没有函数名字的函数。C#…

maven管理工具使用package打包的时候无法将lib文件夹下的第三方jar包打入,上线打jar包后运行异常问题

问题描述&#xff1a; 调用第三方接口的时候通过手动引入了第三方的两个jar包到我本项目的lib文件夹下&#xff0c;并在pom文件添加入下配置&#xff1a; <dependency><groupId>cn.xxxx.xxxx.core</groupId><artifactId>xxxx-core</artifactId>…

Spring Boot 中实现跨域的几种方式

前言 在现代Web应用中&#xff0c;由于安全性和隐私的考虑&#xff0c;浏览器限制了从一个域向另一个域发起的跨域HTTP请求。解决这个问题的一种常见方式是实现跨域资源共享&#xff08;CORS&#xff09;。Spring Boot提供了多种方式来处理跨域请求&#xff0c;本文将介绍其中的…

C语言字符串处理提取时间(ffmpeg返回的时间字符串)

【1】需求 需求&#xff1a;有一个 “00:01:33.90” 这样格式的时间字符串&#xff0c;需要将这个字符串的时间值提取打印出来&#xff08;提取时、分、秒、毫秒&#xff09;。 这个时间字符串从哪里来的&#xff1f; 是ffmpeg返回的时间&#xff0c;也就是视频的总时间。 下…

vs快捷键

ctrlMo 折叠代码块 ctrlML 打开代码块

电子电器架构(E/E)演化 —— 主流主机厂域集中架构概述

电子电器架构(E/E)演化 —— 主流主机厂域集中架构概述 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。…

系列七(实战)、发送 接收单向消息(Java操作RocketMQ)

一、发送 & 接收单向消息 1.1、概述 发送单向消息&#xff0c;适用于发送方不关心或者不在意消息的发送结果&#xff0c;这种方式的吞吐量很大&#xff0c;但是存在消息丢失的风险&#xff0c;对于重要消息要慎用&#xff01;该种方式通常适用于对消息没有那么严格的场景中…

类和对象的创建和实例化

1. 类的概述 1.1 具体示例 类是描述一类事物的特征和行为的统称&#xff0c;抽象的不存在的&#xff0c;泛指的概念&#xff0c;例如&#xff1a;描述一个人&#xff0c;从外观上&#xff08;特征&#xff09;和言行举止&#xff08;行为&#xff09;上进行描述外观上&#xff…

c 语言学习:输出阶乘的算式

c 语言学习&#xff1a;输出阶乘的算式 代码 #include "stdio.h"int fact(int num){if (num < 1){printf("1 ");return 1;} else {printf("%d x ",num);return num * fact(num-1);} }int main(){int num 10; // printf("plz inpu…

【华为OD题库-107】编码能力提升计划-java

题目 为了提升软件编码能力&#xff0c;小王制定了刷题计划&#xff0c;他选了题库中的n道题&#xff0c;编号从0到n-1&#xff0c;并计划在m天内按照题目编号顺序刷完所有的题目(注意&#xff0c;小王不能用多天完成同一题) 在小王刷题计划中&#xff0c;小王需要用time[i]的时…

老鹰目标检测数据集VOC格式60张

老鹰是天空中的王者&#xff0c;它们拥有极佳的飞行能力。它们能以惊人的速度在天空中翱翔&#xff0c;尤其擅长高空俯冲捕食。老鹰的视力非常敏锐&#xff0c;能够准确地发现地面上的猎物&#xff0c;并迅速下落抓取。它们的爪子强而有力&#xff0c;足以击倒比自己体型庞大的…

云计算与大数据之间的羁绊(期末不挂科版):云计算 | 大数据 | Hadoop | HDFS | MapReduce | Hive | Spark

文章目录 前言&#xff1a;一、云计算1.1 云计算的基本思想1.2 云计算概述——什么是云计算&#xff1f;1.3 云计算的基本特征1.4 云计算的部署模式1.5 云服务1.6 云计算的关键技术——虚拟化技术1.6.1 虚拟化的好处1.6.2 虚拟化技术的应用——12306使用阿里云避免了高峰期的崩…

NAT路由器,将内网ip转换为外网ip

Network Address Translation&#xff0c;网络地址翻译。 概念 NAT就是在局域网内部使用内部地址&#xff0c;而当内部节点要与外部网络通信时&#xff0c;在网关将内部地址替换为公用地址&#xff0c;从而在外部网关正常使用。 NAT表是转换的核心 NAT路由器有NAT表&#xf…

0基础学习VR全景平台篇第131篇:曝光三要素—光圈

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 我们经常从电视或书刊上看到这样的照片&#xff0c;照片的主体清晰&#xff0c;前后镜朦胧虚化&#xff0c;整体看起来非常的漂亮。那这样的照片是如何拍出来的呢&#xff1f;他和…