当前位置: 首页 > news >正文

Vue2中根据权限添加动态路由

Vue2中根据权限添加动态路由

大概记录一下主要代码

1.根据后端返回的路由列表生成左侧菜单(后端返回的数据结构中用id和pid来区别包含关系)

大概结构如下:
在这里插入图片描述
在这里插入图片描述

2.前端需要处理成包含children的树形结构

//动态生成菜单
export const generatorDynamicRouter = (data) => {console.log('generatorDynamicRouter', data);return new Promise((resolve, reject) => {const resNav = data.antDesignmenusconst menuNav = []const childrenNav = []//      后端数据, 根级树数组,  根级 PIDlistToTree(resNav, childrenNav, 0)/*** 增加静态网页*/listToTree(userAccount, childrenNav, 0)rootRouter.children = childrenNavmenuNav.push(rootRouter)const routers = generator(menuNav)routers.push(notFoundRouter)resolve(routers)}).catch(err => {// reject('加载菜单失败')return Promise.reject(err)})
}
/*** 数组转树形结构* @param list 源数组* @param tree 树* @param parentId 父ID*/
const listToTree = (list, tree, parentId) => {list.forEach(item => {// 判断是否为父级菜单// eslint-disable-next-line eqeqeqif (item.pid == parentId) {const child = {...item,key: item.key || item.name,children: []}// 迭代 list, 找到当前菜单相符合的所有子菜单listToTree(list, child.children, item.id)// 删掉不存在 children 值的属性if (child.children.length <= 0) {delete child.children}// 加入到树中tree.push(child)}})
}
/*** 格式化树形结构数据 生成 vue-router 层级路由表** @param routerMap* @param parent* @returns {*}*/
export const generator = (routerMap, parent) => {return routerMap.map(item => {// eslint-disable-next-line no-unused-varsconst { title, show, hideChildren, hiddenHeaderContent, target, icon, link } = item.meta || {}const currentRouter = {// 如果路由设置了 path,则作为默认 path,否则 路由地址 动态拼接生成如 /dashboard/workplacepath: item.path || `${parent && parent.path || ''}/${item.key}`,// 路由名称,建议唯一name: item.name || item.key || '',// 该路由对应页面的 组件 :方案1// component: constantRouterComponents[item.component || item.key],// 该路由对应页面的 组件 :方案2 (动态加载)component: (constantRouterComponents[item.component || item.key]) || (() => import(`@/views/${item.component}`)),// meta: 页面标题, 菜单图标, 页面权限(供指令权限用,可去掉)meta: {title: title,icon: icon || undefined,// hiddenHeaderContent: hiddenHeaderContent,target: target,link: link},hidden: item.hidden}// 是否设置了隐藏菜单if (show === false) {currentRouter.hidden = true}// 是否设置了隐藏子菜单if (hideChildren) {currentRouter.hideChildrenInMenu = true}// 为了防止出现后端返回结果不规范,处理有可能出现拼接出两个 反斜杠if (!currentRouter.path.startsWith('http')) {currentRouter.path = currentRouter.path.replace('//', '/')}// 重定向item.redirect && (currentRouter.redirect = item.redirect)// 是否有子菜单,并递归处理if (item.children && item.children.length > 0) {// RecursioncurrentRouter.children = generator(item.children, currentRouter)}return currentRouter})
}

3.在Vuex中存储路由

/*** 向后端请求用户的菜单,动态生成路由*/
import { constantRouterMap, detailRouter } from '@/config/router.config'
import { generatorDynamicRouter } from '@/router/generator-routers'const permission = {state: {routers: constantRouterMap,addRouters: []},mutations: {SET_ROUTERS: (state, routers) => {state.addRouters = routersstate.routers = constantRouterMap.concat(routers)console.log("SET_ROUTERS", routers);}},actions: {GenerateRoutes ({ commit }, data) {return new Promise(resolve => {generatorDynamicRouter(data).then(routers => {let _index = routers.findIndex((item) => item.path === '/')if (_index != -1 && routers[_index].children && routers[_index].children.length) {// 这个是路由生成后添加的自定义详情页路由routers[_index].children = routers[_index].children.concat(detailRouter)}console.log(routers, 'routers-----routers---routers')commit('SET_ROUTERS', routers)resolve()})}).catch(err => {// eslint-disable-next-line no-undefreject(err)})}}
}export default permission

4.最后在permission.js文件中的路由守卫里动态添加路由

在这里插入图片描述

5.最后生成菜单路由格式

在这里插入图片描述

相关文章:

Vue2中根据权限添加动态路由

Vue2中根据权限添加动态路由 大概记录一下主要代码 1.根据后端返回的路由列表生成左侧菜单&#xff08;后端返回的数据结构中用id和pid来区别包含关系&#xff09; 大概结构如下&#xff1a; 2.前端需要处理成包含children的树形结构 //动态生成菜单 export const gener…...

搭建 Python 环境 | Python、PyCharm

计算机 计算机能完成的工作&#xff1a; 算术运算逻辑判断数据存储网络通信…更多的更复杂的任务 以下这些都可以称为 “计算机”&#xff1a; 一台计算机主要由以下这几个重要的组件构成 CPU 中央处理器&#xff1a;大脑&#xff0c;算术运算&#xff0c;逻辑判断 存储器&…...

NPOI 读取和写入Excel

在C#中使用NPOI库读取和写入Excel文件&#xff0c;你需要先下载并安装NPOI库。你可以在NuGet管理器中搜索NPOI并进行安装。 以下是一个使用NPOI库进行Excel文件读取和写入的示例&#xff1a; 读取Excel文件&#xff1a; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel…...

Linux工具【2】(调试器gdb、项目自动化构建工具make/Makefile)

gdb、make/Makefile 引言调试器gdb介绍常用指令 自动化构建工具make/Makefile介绍使用依赖关系与依赖方法编辑Makefile伪目标 总结 引言 在上一篇文章中介绍了Linux中的编辑器vim与编译器gcc与g&#xff1a; 戳我看vim与gcc详解哦 在本篇文章中将继续来介绍Linux中的工具&…...

C++ 网络编程项目fastDFS分布式文件系统(三)-Nginx部分

目录 1. 一些基本概念 1.1 Nginx初步认识 1.2 正向/反向代理 1.3 域名和IP 2. Nginx 安装和配置 2.1 安装 2.2 配置 3. Nginx的使用 3.1 部署静态网页 3.2 反向代理和负载均衡 4 课外知识导读 1. URL和URI ​编辑 2. DNS解析过程 1. 一些基本概念 1.1 Nginx初步认…...

Apache-DBUtils

目录 封装方法 引出dbutils 案例 当关闭connection后&#xff0c;resultset结果集就无法使用了&#xff0c;这就使得resultset不利于数据的管理 封装方法 我们可以将结果集先存储在一个集合中&#xff0c;当connection关闭后&#xff0c;我们可以通过访问集合来访问结果集 …...

LangChain手记 Agent 智能体

整理并翻译自DeepLearning.AILangChain的官方课程&#xff1a;Agent&#xff08;源代码可见&#xff09; “人们有时会将LLM看作是知识库&#xff0c;因为它被训练所以记住了来自互联网或其他地方的海量信息&#xff0c;因而当你向它提问时&#xff0c;它可以回答你的问题。有一…...

87-基于stm32单片机粮仓仓库环境温湿度烟雾监测报警系统Proteus仿真+源码

资料编号&#xff1a;087 一&#xff1a;功能介绍&#xff1a; 1、采用stm32单片机OLED显示屏烟雾浓度检测DHT11温湿度电机按键蜂鸣器&#xff0c;制作一个温湿度采集、烟雾浓度采集&#xff0c;OLED显示相关数据&#xff0c; 2、通过按键设置温度上限、烟雾浓度上限&#xff0…...

ChatGPT 调教日记(二):程序员转量化的背景知识

程序员如何学习量化金融 作为一个程序员学习量化金融&#xff08;quant&#xff09;是一个不错的选择。以下是一些建议&#xff1a; 学习金融基础知识&#xff1a;了解金融市场、投资策略和金融产品。这将帮助你理解量化金融的背景和应用场景。 学习统计学和数学&#xff1a;…...

什么是网络地址转换 (NAT)

网络地址转换&#xff08;NAT&#xff09;是更改源和目标 IP 地址和端口的过程&#xff0c;地址转换减少了对 IPv4 公共地址的需求&#xff0c;并隐藏了专用网络地址范围&#xff0c;该过程通常由路由器或防火墙完成。 NAT是如何工作的 NAT 允许单个设备&#xff08;如路由器…...

系统架构设计师---事务管理、并发控制、数据库的备份与恢复

目录 事务管理 定义 事务的四个特性(ACID) 相关SQL语句 并发控制...

如何更好的维护自己的电脑?

我的笔记本电脑 我使用的华硕天选3是一款游戏本&#xff0c;搭载了英特尔酷睿i7-12700H处理器&#xff0c;16GB内存&#xff0c;512GB固态硬盘和NVIDIA GeForce RTX 3050显卡。屏幕尺寸为15.6英寸&#xff0c;分辨率为2560x1440。对于日常使用和工作学习娱乐都能满足要求。 日常…...

element+vue 表格行拖拽功能

解决方案 使用 sortable.js 步骤一&#xff1a; 安装 npm install vuedraggable步骤二&#xff1a;引入 import Sortable from sortablejs;步骤三&#xff1a; el-table 添加row-key属性&#xff0c;外层包一层 sortableDiv <div class"sortableDiv"> 拖…...

Python学习笔记_基础篇(三)_数据类型之列表

一.基本数据类型 整数&#xff1a;int 字符串&#xff1a;str(注&#xff1a;\t等于一个tab键) 布尔值&#xff1a; bool 列表&#xff1a;list &#xff08;元素的集合&#xff09; 列表用[] 元祖&#xff1a;tuple 元祖用&#xff08;&#xff09; 字典&#xff1a;dict 注&a…...

目标检测YOLO实战应用案例100讲-交通目标检测中传感器数据采集容错控制方法

目录 前言 交通传感器数据采集相关理论基础 2.1交通目标检测系统数据采集简介...

ElasticSearch 8.9.0 开发模式安装

ElasticSearch 8.9.0 开发模式安装 MacOS&#xff08;Apple芯片&#xff09;&#xff1a;https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.9.0-darwin-aarch64.tar.gz Linux&#xff1a;https://artifacts.elastic.co/downloads/elasticsearch/elasti…...

docker部署redis

这里写目录标题 1.安装Redis2.新建挂载文件夹3.配置redis4.创建redis容器&#xff0c;挂载启动命令连接测试 Docker停止、删除、重启、启动容器 1.安装Redis 通过docker search redis和docker pull redis下载redis镜像 2.新建挂载文件夹 新建data和conf两个文件夹&#xff0…...

ZooKeeper的应用场景(分布式锁、分布式队列)

7 分布式锁 分布式锁是控制分布式系统之间同步访问共享资源的一种方式。如果不同的系统或是同一个系统的不同主机之间共享了一个或一组资源&#xff0c;那么访问这些资源的时候&#xff0c;往往需要通过一些互斥手段来防止彼此之间的干扰&#xff0c;以保证一致性&#xff0c;…...

seata 的部署和集成

文章目录 seata的部署和集成一、部署Seata的tc-server1.下载2.解压3.修改配置4.在nacos添加配置5.创建数据库表6.启动TC服务 二、微服务集成seata1.引入依赖2.修改配置文件 TODO三、TC服务的高可用和异地容灾1.模拟异地容灾的TC集群2.将事务组映射配置到nacos3.微服务读取nacos…...

C++入门基础(万字详解!!!)

文章目录 前言1.C关键字2.命名空间3.C的输入输出4.缺省参数4.1 全缺省4.2 半缺省 5.函数重载6. 引用6.1 引用的特性6.2 引用的使用场景6.3 引用和指针 7.内联函数7.1 特性 8.auto关键字8.1 注意事项 9. 基于范围的for循环9.1 使用条件 10.指针控制nullptr10.1 注意事项 11.总结…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...