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

react根据后端返回数据动态添加路由

以下代码都为部分核心代码

一.根据不同的登录用户,返回不同的权限列表 ,以下是三种不同用户限权列表

const pression = {
//超级管理员BigAdmin: [{key: "screen",icon: "FileOutlined",label: "数据图表",},{key: "users",icon: "UserOutlined",label: "用户列表",},{key: "food",icon: "PieChartOutlined",label: "食谱",},{key: "discuss",icon: "CommentOutlined",label: "评论",}],
//普通管理员Admin: [{key: "screen",icon: "FileOutlined",label: "数据图表",},{key: "food",icon: "PieChartOutlined",label: "食谱",}, {key: "discuss",icon: "CommentOutlined",label: "评论",}],
//普通用户commont: [{key: "screen",icon: "FileOutlined",label: "数据图表",}]}

二.实现动态菜单

用户登录后先将权限列表存入本地浏览器,再跳转到系统页面,并在首次加载时候获取本地权限列表数据,进行动态渲染

//假如登录的是超级管理员,对应的权限列表应如下,这里使用了ant design的菜单组件,为了方便所以使用符合该菜单组件的数据结构BigAdmin: [{key: "screen",icon: "FileOutlined",label: "数据图表",},{key: "users",icon: "UserOutlined",label: "用户列表",},{key: "food",icon: "PieChartOutlined",label: "食谱",},{key: "discuss",icon: "CommentOutlined",label: "评论",}],
//-----------------import * as Icons from '@ant-design/icons';//--自定义组件将字符串转化为对应的组件---------
const ICONFONT = (props: any) => {const { icon } = props//动态菜单不能确定需要那些icon,全部引入作为Iconsreturn React.createElement(Icons[icon])
}const [Enums, setenum] = useState<any>()const AdminInfo = useSelector((state: any) => state.AdminStore.AdminInfo)
useEffect(() => {
//登录后,系统首页获取本地权限列表,因为这里使用了ant design的icon,需要将字符串转化为对应的组件,这里封装的自定义组件let items = JSON.parse(JSON.stringify(AdminInfo.pression))items.map((item: any) => {item.icon = item.icon && <ICONFONT icon={item.icon}></ICONFONT>})setenum([...items])}, [])//在菜单组件中使用<Menu selectedKeys={['screen']} mode="inline" items={Enums} onClick={chooose} />

三.实现动态路由 

先把动态路由和静态路由分离出来,在路由配置文件中,这里需要进行动态添加的路由为 path: "/backstage"下的子路由,需要给他一个name,后续方便查找


//这里也很重要,页面加载时候,先判断本地是否存入了权限列表
import { Admin } from "@/utils/local"
//获取本地存储的信息
const rs = Admin.get_Admin()//路由懒加载
const lazyComponent = (Component: FC) => {return <Suspense fallback={Skeletons}><Component /></Suspense>
}//静态路由
const routers = [{path: '/',element: <Navigate to="/home" />},{path: "/",element: <App />,children: [{path: "/home",element: lazyComponent(Home),},{path: "/category",element: lazyComponent(About),children: [{path: "/category",element: <Navigate to={'/category/mainfood'}></Navigate>},{path: "mainfood",element: lazyComponent(Mainfood)},{path: "bake",element: lazyComponent(Bake)},{path: "beverage",element: lazyComponent(Beverage)},{path: "soup",element: lazyComponent(Soup)}]}, {path: "/user",element: lazyComponent(Test),}, {path: "/edituser",element: lazyComponent(EeditUser)},{path: "/editfood",element: lazyComponent(Edit_Food)}]},{path: "/detaile/:id",element: lazyComponent(Datile)},{path: "/login",element: <Login></Login>},{
//需要动态添加的路由在此处path: "/backstage",element: lazyComponent(Back),name: "back",children: [{path: "/backstage",element: <Navigate to="/backstage/screen"></Navigate>},{path: "screen",element: lazyComponent(Screen)},]},{path: "*",element: <Error></Error>}
]//准备需要添加的动态路由,将添加到 path: "/backstage"的子路由下,
//这里的id必须必须填写,而且必须唯一, 
//如:id:'4-2',4表示在一级路由下索引为4的路由,2表示在该路由下子路由的索引
const dtRoute = [{path: "users",element: lazyComponent(Users),id: '4-2'},{path: "food",id: '4-3',element: lazyComponent(Food)},{path: "discuss",id: '4-4',element: lazyComponent(Discuss)}
]

定义一个动态添加路由的函数

const dtRoute = [{path: "users",element: lazyComponent(Users),id: '4-2'},{path: "food",id: '4-3',element: lazyComponent(Food)},{path: "discuss",id: '4-4',element: lazyComponent(Discuss)}
]const route = createBrowserRouter(routers)//这里需要导出函数,在登录后调用,pression即为后端返回的列表
export function addrouter(pression: any[]) {
//找到需要动态添加的路由,name为back,即为之前的path:"/backstage"路由const baseRouter = route.routes.find((rt: any) => rt.name === "back")console.log(baseRouter)if (pression.length !== 0) {//判断传入的权限列表是否在动态路由之中,有则追加进去for (const use of pression) {for (const rt of dtRoute) {if (rt.path === use.key) {baseRouter?.children?.push(rt)} else {}}}} else {
//如果传入的为空表示,退出登录,更新路由,这里取的最前两个静态路由,即删除动态路由baseRouter?.children?.splice(2)}
}//这里之前已提到,
import { Admin } from "@/utils/local"
const rs = Admin.get_Admin()
//-------页面刷新时候会重新执行路由文件---访问其它动态路由的时候会丢失找不到,
//因为动态路由只在登录的时候进行了添加,而页面刷新会让整个路由重新执行,而不会重新动态添加--
//所以刷新的时候要判断本地是否存储了动态路由信息,并再次添加
if (rs) {addrouter(rs.pression)
}

在redux中使用动态添加路由的函数

import { createSlice } from "@reduxjs/toolkit";
import { Admin } from "@/utils/local";
import { Admin_Loing } from '@/apis/admin/admin'
import { message } from "antd"
import type { AppDispatch } from "../index"//导入动态添加路由的函数
import { addrouter } from "@/router"
const AdminStore = createSlice({name: "RootStore",initialState: {AdminInfo: Admin.get_Admin() || {pression: [],user: {}}},reducers: {//定义登录方法,需要在登录后动态添加路由Login: (state, { payload }) => {state.AdminInfo = payloadAdmin.set_Admin(payload)
//调用动态添加路由的函数,并传入登录后传来的权限列表addrouter(payload.pression)},GoOut: (state) => {state.AdminInfo = {pression: [],user: {}}Admin.remove_Admin()addrouter([])},},
})//导出Login
export const { Login, GoOut } = AdminStore.actions//,登录是异步的,所以定义异步登录方法
const axios_admin_login = (data: any) => {return async (dispatch: AppDispatch) => {const res = await Admin_Loing(data)if (res.status == 200) {
//登录成功后调用Login,并传入包含权限列表的数据dispatch(Login(res.data))message.success("登录成功")return true} else {return false}}
}
//最后导出异步登录,在登录界面使用
export { axios_admin_login }
export default AdminStore.reducer

相关文章:

react根据后端返回数据动态添加路由

以下代码都为部分核心代码 一.根据不同的登录用户&#xff0c;返回不同的权限列表 &#xff0c;以下是三种不同用户限权列表 const pression { //超级管理员BigAdmin: [{key: "screen",icon: "FileOutlined",label: "数据图表",},{key: "…...

机器学习中的可解释性

「AI秘籍」系列课程&#xff1a; 人工智能应用数学基础 人工智能Python基础 人工智能基础核心知识 人工智能BI核心知识 人工智能CV核心知识 为什么我们需要了解模型如何进行预测 我们是否应该始终信任表现良好的模型&#xff1f;模型可能会拒绝你的抵押贷款申请或诊断你患…...

上海慕尼黑电子展开展,启明智显携物联网前沿方案亮相

随着科技创新的浪潮不断涌来&#xff0c;上海慕尼黑电子展在万众瞩目中盛大开幕。本次展会汇聚了全球顶尖的电子产品与技术解决方案&#xff0c;成为业界瞩目的焦点。启明智显作为物联网彩屏显示领域的佼佼者携产品亮相展会&#xff0c;为参展者带来了RTOS、LINUX全系列方案及A…...

Centos7离线安装ElasticSearch7.4.2

一、官网下载相关的安装包 ElasticSearch7.4.2&#xff1a; elasticsearch-7.4.2-linux-x86_64.tar.gz 下载中文分词器&#xff1a; elasticsearch-analysis-ik-7.4.2.zip 二、上传解压文件到服务器 上传到目录&#xff1a;/home/data/elasticsearch 解压文件&#xff1…...

深入理解sklearn中的模型参数优化技术

参数优化是机器学习中的关键步骤&#xff0c;它直接影响模型的性能和泛化能力。在sklearn中&#xff0c;参数优化可以通过多种方式实现&#xff0c;包括网格搜索&#xff08;GridSearchCV&#xff09;、随机搜索&#xff08;RandomizedSearchCV&#xff09;和贝叶斯优化等。本文…...

【Elasticsearch】开源搜索技术的演进与选择:Elasticsearch 与 OpenSearch

开源搜索技术的演进与选择&#xff1a;Elasticsearch 与 OpenSearch 1.历史发展2.OpenSearch 与 Elasticsearch 相同点3.OpenSearch 与 Elasticsearch 不同点3.1 版本大不同3.2 许可证不同3.3 社区不同3.4 功能不同3.5 安全性不同3.6 性能不同3.7 价格不同3.8 两者可相互导入 4…...

欧拉openEuler 22.03 LTS-部署k8sv1.03.1

1.设置ip # vi /etc/sysconfig/network-scripts/ifcfg-ens32 TYPEEthernet PROXY_METHODnone BROWSER_ONLYno BOOTPROTOstatic DEFROUTEyes IPV4_FAILURE_FATALno #IPV6INITyes #IPV6_AUTOCONFyes #IPV6_DEFROUTEyes #IPV6_FAILURE_FATALno #IPV6_ADDR_GEN_MODEeui64 NAMEens1…...

老年生活照护实训室:为养老服务业输送专业人才

本文探讨了老年生活照护实训室在养老服务业专业人才培养中的关键作用。通过详细阐述实训室的功能、教学实践、对学生能力的培养以及面临的挑战和解决方案&#xff0c;强调了其在提升人才素质、满足行业需求方面的重要性&#xff0c;旨在为养老服务业的可持续发展提供有力的人才…...

go语言中使用WaitGroup和channel实现处理多线程问题

WaitGroup 背景 如果将一个任务分为任意个小任务&#xff0c;并且不关心小任务的执行顺序&#xff0c;并且希望等待全部的小任务执行完成后再去操作后面的逻辑&#xff0c;那我推荐你用sync.WaitGRoup 使用方法 比如&#xff0c;有一个任务需要执行 3 个子任务&#xff0c;…...

Open3D 计算点云的平均密度

目录 一、概述 1.1基于领域密度计算原理 1.2应用 二、代码实现 三、实现效果 2.1点云显示 2.2密度计算结果 一、概述 在点云处理中&#xff0c;点的密度通常表示为某个点周围一定区域内的点的数量。高密度区域表示点云较密集&#xff0c;低密度区域表示点云较稀疏。计算…...

C语言之数据在内存中的存储(1),整形与大小端字节序

目录 前言 一、整形数据在内存中的存储 二、大小端字节序 三、大小端字节序的判断 四、字符型数据在内存中的存储 总结 前言 本文主要讲述整型包括字符型是如何在内存中存储的&#xff0c;涉及到大小端字节序这一概念&#xff0c;还有如何判断大小端&#xff0c;希望对大…...

B端全局导航:左侧还是顶部?不是随随便便,有依据在。

一、什么是全局导航 B端系统的全局导航是指在B端系统中的主要导航菜单&#xff0c;它通常位于系统的顶部或左侧&#xff0c;提供了系统中各个模块和功能的入口。全局导航菜单可以帮助用户快速找到和访问系统中的各个功能模块&#xff0c;提高系统的可用性和用户体验。 全局导航…...

什么是海外仓管理自动化?策略及落地实施步骤指南

作为海外仓的管理者&#xff0c;你每天都面临提高海外仓运营效率、降低成本和满足客户需求的问题。海外仓自动化管理技术为这些问题提供了不错的解决思路&#xff0c;不过和任何新技术一样&#xff0c;从策略到落地实施&#xff0c;都有一个对基础逻辑的认识过程。 今天我们整…...

自定义控件三部曲之绘图篇(六)Paint之函数大汇总、ColorMatrix与滤镜效果、setColorFilter

在自定义控件的绘图篇中&#xff0c;Paint 类是核心的组成部分之一&#xff0c;它控制了在 Canvas 上绘制的内容的各种属性&#xff0c;包括颜色、风格、抗锯齿、透明度等等。下面将详细介绍 Paint 的主要功能以及如何使用 ColorMatrix 和 setColorFilter 来实现滤镜效果。 Pa…...

请写sql满足业务:找到连续登录3天以上的用户

为了找到连续登录超过 3 天的用户&#xff0c;我们可以使用 SQL 窗口函数和递归查询来实现。假设有一个 user_logins 表&#xff0c;包含以下字段&#xff1a; user_id&#xff08;用户ID&#xff09;login_date&#xff08;登录日期&#xff09; 假设 login_date 是 DATE 类…...

fatal error: apriltag/apriltag.h: No such file or directory 的 参考解决方法

文章目录 写在前面一、问题描述二、解决方法参考链接 写在前面 自己的测试环境&#xff1a; Ubuntu20.04&#xff0c;ROS-Noteic 一、问题描述 自己编译ROS程序的时候遇到如下问题&#xff1a; fatal error: apriltag/apriltag.h: No such file or directory9 | #include &…...

C++继承(一文说懂)

目录 一&#xff1a; &#x1f525;继承的概念及定义1.1 继承的概念1.2 继承定义1.2.1 定义格式1.2.2 继承关系和访问限定符1.2.3 继承基类成员访问方式的变化 二&#xff1a;&#x1f525;基类和派生类对象赋值转换三&#xff1a;&#x1f525;继承中的作用域四&#xff1a;&a…...

卷积神经网络可视化的探索

文章目录 训练LeNet模型下载FashionMNIST数据训练保存模型 卷积神经网络可视化加载模型一个测试图像不同层对图像处理的可视化第一个卷积层的处理第二个卷积层的处理 卷积神经网络是利用图像空间结构的一种深度学习网络架构&#xff0c;图像在经过卷积层、激活层、池化层、全连…...

RxJava学习记录

文章目录 1. 总览1.1 基本原理1.2 导入包和依赖 2. 操作符2.1 创建操作符2.2 转换操作符2.3 组合操作符2.4 功能操作符 1. 总览 1.1 基本原理 参考文献 构建流&#xff1a;每一步操作都会生成一个新的Observable节点(没错&#xff0c;包括ObserveOn和SubscribeOn线程变换操作…...

Spring Boot Vue 毕设系统讲解 3

目录 项目配置类 项目中配置的相关代码 spring Boot 拦截器相关知识 一、基于URL实现的拦截器&#xff1a; 二、基于注解的拦截器 三、把拦截器添加到配置中&#xff0c;相当于SpringMVC时的配置文件干的事儿&#xff1a; 项目配置类 项目中配置的相关代码 首先定义项目认…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...