项目实战--路由权限
封装
单独抽象成组件,写一个新的关于路由的NewsRouter.jsx:
import SideMenu from "../../components/sandbox/SideMenu";
import TopHeader from "../../components/sandbox/TopHeader";
import { Routes, Route } from "react-router-dom";
import Home from "../../views/sandbox/home/Home";
import RightList from "../../views/sandbox/right-manage/RightList";
import UserList from "../../views/sandbox/user-manage/UserList";
import RoleList from "../../views/sandbox/right-manage/RoleList";
import { Navigate } from "react-router-dom";
import Nopermission from "../../views/sandbox/nopermission/Nopermission";
//引入antd
import { theme, Layout, ConfigProvider } from "antd";
import NewsAdd from "../../views/sandbox/news-manage/NewsAdd";
import NewsDraft from "../../views/sandbox/news-manage/NewsDraft";
import NewsCategory from "../../views/sandbox/news-manage/NewsCategory";
import Audit from "../../views/sandbox/audit-manage/Audit";
import AuditList from "../../views/sandbox/audit-manage/AuditList";
import Published from "../../views/sandbox/publish-manage/Published";
import Unpublished from "../../views/sandbox/publish-manage/Unpublished";
import Sunset from "../../views/sandbox/publish-manage/Sunset";
import { use, useEffect,useState } from "react";
import axios from "axios";//创建一个本地的路由映射表
const LocalRouterMap = {"/home":Home,"user-manage/list":UserList,"right-manage/right/list":RightList,"right-manage/role/list":RoleList,//写什么新闻列表啊,各种权限啊"/news-manage/add":NewsAdd,"/news-manage/draft":NewsDraft,"/news-manage/category":NewsCategory,"/audit-manage/audit":Audit,"/audit-manage/list":AuditList,"publish-manage/published":Published,"/publish-manage/unpublished":Unpublished,"/publish-manage/sunset":Sunset,
} export default function NewsRouter() {const [BackRouteList,setBackRouteList] = useState([])useEffect(()=>{Promise.all([axios.get("http://localhost:3000/rights"),axios.get("http://localhost:3000/children"), ]).then(res=>{// console.log(res); setBackRouteList([...res[0].data,...res[1].data])// console.log([...res[0].data,res[1].data])})},[])return (<Routes>{/* 理应后端取数据,根据权限动态渲染 */}{BackRouteList.map(item=><Route path={item.key}/>)}<Route path="/" element={<Navigate to="/home" />} /><Route path="*" element={<Nopermission />} /></Routes>)
}
权限判断
但是这样的路由权限都是嵌套的,应该怎么办呢?
没所谓,axios两次就好了
import SideMenu from '../../components/sandbox/SideMenu'
import TopHeader from '../../components/sandbox/TopHeader'
import { Routes, Route } from 'react-router-dom'
import Home from '../../views/sandbox/home/Home'
import RightList from '../../views/sandbox/right-manage/RightList'
import UserList from '../../views/sandbox/user-manage/UserList'
import RoleList from '../../views/sandbox/right-manage/RoleList'
import { Navigate } from 'react-router-dom'
import Nopermission from '../../views/sandbox/nopermission/Nopermission'
//引入antd
import { theme, Layout, ConfigProvider } from 'antd'
import NewsAdd from '../../views/sandbox/news-manage/NewsAdd'
import NewsDraft from '../../views/sandbox/news-manage/NewsDraft'
import NewsCategory from '../../views/sandbox/news-manage/NewsCategory'
import Audit from '../../views/sandbox/audit-manage/Audit'
import AuditList from '../../views/sandbox/audit-manage/AuditList'
import Published from '../../views/sandbox/publish-manage/Published'
import Unpublished from '../../views/sandbox/publish-manage/Unpublished'
import Sunset from '../../views/sandbox/publish-manage/Sunset'
import { use, useEffect, useState } from 'react'
import axios from 'axios'//创建一个本地的路由映射表
const LocalRouterMap = {'/home': Home,'/user-manage/list': UserList,'/right-manage/right/list': RightList,'/right-manage/role/list': RoleList,//写什么新闻列表啊,各种权限啊'/news-manage/add': NewsAdd,'/news-manage/draft': NewsDraft,'/news-manage/category': NewsCategory,'/audit-manage/audit': Audit,'/audit-manage/list': AuditList,'publish-manage/published': Published,'/publish-manage/unpublished': Unpublished,'/publish-manage/sunset': Sunset,
}export default function NewsRouter() {// 后端返回的路由映射表const [BackRouteList, setBackRouteList] = useState([])useEffect(() => {Promise.all([axios.get('http://localhost:3000/rights'),axios.get('http://localhost:3000/children'),]).then((res) => {setBackRouteList([...res[0].data, ...res[1].data])})}, [])const {role: { rights },} = JSON.parse(localStorage.getItem('token'))const checkRoute = (item) => {return LocalRouterMap[item.key] && item.pagepermisson}const checkUserPermisson = (item) => {//当前登录用户权限列表return rights.includes(item.key)}return (<Routes>{/* 动态渲染路由 */}{BackRouteList.map((item) => {const Component = LocalRouterMap[item.key]// console.log(item.key)if (checkRoute(item) && checkUserPermisson(item)) {return (Component && (<Route path={item.key} key={item.key} element={<Component />} />))}return null})}{/* 首页重定向 */}<Route path="/" element={<Navigate to="/home" />} />{/* 权限不足页面 */}{BackRouteList.length > 0 && (<Route path="*" element={<Nopermission />} />)}</Routes>)
}
同时加上权限的判断,这样可以阻拦通过路由访问页面的行为(拦截)
进度条
给代码加上进度条
npm install nprogress
然后继续引入:
import SideMenu from "../../components/sandbox/SideMenu";
import TopHeader from "../../components/sandbox/TopHeader";
import { Routes, Route } from "react-router-dom";
import Home from "./home/Home";
import RightList from "./right-manage/RightList";
import UserList from "./user-manage/UserList";
import RoleList from "./right-manage/RoleList";
import { Navigate } from "react-router-dom";
import Nopermission from "../sandbox/nopermission/Nopermission";
//引入antd
import { theme, Layout, ConfigProvider } from "antd";
import NewsRouter from "../../components/sandbox/NewsRouter";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { useLocation } from 'react-router-dom'//引入自己写的css
import "./NewSandbox.css";
import { useEffect } from "react";
//解构Layout
const { Content } = Layout;function NewSandbox() {const location = useLocation();useEffect(() => {// 当路由变化时,启动进度条NProgress.start();// 模拟延迟,延迟一定时间后完成进度条const timer = setTimeout(() => {NProgress.done();}, 500); // 可以根据内容加载的时间调整延迟,500ms 是一个示例// 清理定时器return () => {clearTimeout(timer);NProgress.done();};}, [location]); // 每次路由变化时触发该 effect//解构themeconst { token } = theme.useToken(); // 获取主题 tokenconst { colorBgContainer, borderRadiusLG } = token;return (<ConfigProvider> <Layout>{/* 侧边栏 */}<SideMenu></SideMenu><Layout>{/* 顶部栏 */}<TopHeader></TopHeader><Contentstyle={{margin: '24px 16px',padding: 24,minHeight: 280,// 溢出隐藏overflow:'auto',background: colorBgContainer,borderRadius: borderRadiusLG,}}><NewsRouter></NewsRouter></Content></Layout></Layout></ConfigProvider>);
}export default NewSandbox;
这样可以监听每一次路由变化的时候,都加载一下进度条
相关文章:
项目实战--路由权限
封装 单独抽象成组件,写一个新的关于路由的NewsRouter.jsx: import SideMenu from "../../components/sandbox/SideMenu"; import TopHeader from "../../components/sandbox/TopHeader"; import { Routes, Route } from "re…...
Async 注解原理分析
Async 注解由 Spring 框架提供,被该注解标注的类或方法会在 异步线程 中执行。这意味着当方法被调用时,调用者将不会等待该方法执行完成,而是可以继续执行后续的代码。 Async 注解的使用非常简单,需要两个步骤: 在启…...
pyTorch-迁移学习-图片数据增强-四种天气图片的多分类问题
目录 1.导包 2.加载数据、拼接训练与测试数据的文件夹路径 3数据预处理 3.1数据增强 3.2用分类存储的图片数据创建dataloader 4.加载预训练好的模型 (迁移学习) 4.1固定、修改预训练好的模型 5.将模型拷到GPU上 6.定义优化器与损失函数 7.学习率衰减 8.定义训…...
Linux脚本基础详解
一、基础知识 Linux 脚本主要是指在 Linux 系统中编写的用于自动化执行任务的脚本程序,其中最常用的便是 Bash 脚本。下面我们将从语法、使用方法和示例三个方面详细讲解 Linux 脚本。 1. 脚本简介 定义:Linux 脚本是一系列命令的集合,可以…...
MQTT-Dashboard-数据集成-WebHook、日志管理
常用的 Docker Volume 命令及其用法。 1、创建数据卷 使用 docker volume create 命令可以创建一个新的数据卷。例如,创建一个名为 my_volume 的数据卷: docker volume create my_volume 2、列出数据卷 使用 docker volume ls 命令可以列出所有的数据卷…...
Elixir语言的移动应用安全
Elixir语言的移动应用安全解析 引言 在当今的数字化时代,移动应用已经成为我们日常生活中不可或缺的一部分。从购物、社交到在线银行,几乎每一个生活领域都与移动应用紧密相连。然而,随着应用的普及,安全问题也随之而来。如何确…...
【科学技术部政务服务平台-用户注册/登录安全分析报告】
前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞…...
HTTP 教程 : 从 0 到 1 全面指南 教程【全文三万字保姆级详细讲解】
目录 HTTP 的请求-响应 HTTP 方法 HTTP 状态码 HTTP 版本 安全性 HTTP/HTTPS 简介 HTTP HTTPS HTTP 工作原理 HTTPS 作用 HTTP 与 HTTPS 区别 HTTP 消息结构 客户端请求消息 服务器响应消息 实例 HTTP 请求方法 各个版本定义的请求方法 HTTP/1.0 HTTP/1.1 …...
【LeetCode 热题100】139:单词拆分(动态规划全解析+细节陷阱)(Go语言版)
🚀 LeetCode 热题 139:单词拆分(Word Break)| 动态规划全解析细节陷阱 📌 题目描述 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请判断 s 是否可以由字典中出现的单词拼接成。 说明:不要求字典…...
2025年招投标行业的深度变革:洞察趋势,把握未来
2025年,随着政府工作报告对招投标行业的一系列改革措施的提出,整个行业正面临一场前所未有的深度变革。这些政策旨在推动全国统一大市场的建设、加速数字化转型、促进绿色低碳发展,并强化风险防控。在这场变革中,企业不仅要适应新…...
树莓派学习专题<3>:使能VNC远程桌面与VNC文件传输
树莓派学习专题<3>:使能VNC远程桌面与VNC文件传输 1. 配置VNC2. 使用VNC viewer连接到树莓派3. 使用VNC viewer传输文件 1. 配置VNC 在终端或SSH中,使用如下命令打开树莓派系统配置项: sudo su raspi-config以上两项…...
AI烘焙大赛中的算法:理解PPO、GRPO与DPO最简单的方式
🧠 向所有学习者致敬! “学习不是装满一桶水,而是点燃一把火。” —— 叶芝 我的博客主页: https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区! 🚀 让我们一起努力,共创…...
qt自定义信号槽需要注意的事项
在 Qt 中,自定义信号和槽是与事件和对象交互的核心机制之一。创建自定义信号和槽时,有几个重要事项需要注意,以确保它们能够正确工作。以下是一些需要注意的关键点: 1. 信号和槽的声明 信号声明:信号应该在 signals …...
OpenCV--图像轮廓检测
在图像处理与计算机视觉领域,轮廓检测是一项极为关键的技术。轮廓作为物体边界的重要表征,承载了图像中物体的形状、尺寸和位置等关键信息。通过轮廓检测,我们能够提取出图像中物体的轮廓,为后续的物体识别、图像分割、形状分析等…...
从搜索丝滑过渡到动态规划的学习指南
搜索&动态规划 前言砝码称重满分代码及思路solution 1(动态规划)solution 2(BFS) 跳跃满分代码及思路solution 1(动态规划)solution 2 (BFS) 积木画满分代码及思路动态规划思路讲解solution 前言 本文主要是通过一些竞赛真题…...
通用文字识别技术的出现,深刻改变信息的处理方式
在数字化浪潮席卷全球的今天,文字作为人类文明最基础的载体,正经历着一场前所未有的技术革命。通用文字识别(OCR,Optical Character Recognition)技术已经从简单的"图片转文字"工具,进化为能够理…...
linux 下du 和 ls-alh 的区别
我一直以为du -m 可以显示文件大小。发现不对。正确的做法你是用ls -alh 来使用...
【k8s学习之CSI】理解 LVM 存储概念和相关操作
鸟哥的 Linux 私房菜 – Quota, Software RAID, LVM, iSCSI 0 | 理解 vg 相关概念 在 Linux LVM(逻辑卷管理) 中,以下是 partition(分区)、PV(物理卷)、VG(卷组)、LV&am…...
【分享开发笔记,赚取电动螺丝刀】使用STM32F103的hal库,采用PWM+DMA发送方式驱动WS2812的RGB彩灯
简单和大家介绍一下本文章的主要内容:使用STM32F103C8最小系统板,使用STM32 cubeMX 6.14版本生成底层的驱动库、结合定时器的PWM 输出功能、使用DMA发送数据的 方式,驱动WS2812 的RGB三色灯。 本次小的DIY所需的物料:stm32f103c8…...
CubeMX配置STM32VET6实现网口通信(无操作系统版-附源码)
下面是使用CubeMX配置STM32F407VET6,实现以太网通讯(PHY芯片为LAN8720)的具体步骤总结: 一、硬件连接方式: 硬件原理图: 使用外部晶振为PHY芯片提供时钟。 STM32F407VET6 与 LAN8720 采用 RMII 模式连接。…...
一种反激式开关电源设计流程
引:随着生产和技术的发展,对环保和能源的要求也越来越高,开关电源的应用也越来越广泛,开关电源电路结构种类繁多,包括单端转换器和双端转换器。本文介绍一种利用反激式变换电路实现5V开关电源的设计方法,以…...
数据结构实验3.2:链栈的基本操作与括号匹配问题
文章目录 一,问题描述二,基本要求三,算法分析(一)链栈的存储结构设计(二)链栈基本操作的时间复杂度分析(三)括号匹配算法分析 四,示例代码五,实验…...
一周学会Pandas2 Python数据处理与分析-NumPy算术运算和统计计算
锋哥原创的Pandas2 Python数据处理与分析 视频教程: 2025版 Pandas2 Python数据处理与分析 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 算术运算 数组的灵魂就在于可以进行批量的运算而不是要在循环里面进行元素的运算: 示例: …...
2011年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析
2011年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛(China Undergraduate Mathematical Contest in Modeling)是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动,目的在于激励学生学习数学的积极性,提高学…...
科普:GBDT与XGBoost比较
本文不去讲GBDT与XGBoost算法的原理及算法本身,而是从应用者的角度,对二者比较,以便选择。 XGBoost是GBDT的“工程化增强版”,在保持Boosting核心思想的同时,通过数学优化(二阶导数、正则化)和工…...
大数据技术之 Scala(5)
以下是今天学习的知识点与代码测试: 一、不可变数组与可变数组的转换 说明 arr1.toBuffer //不可变数组转可变数组arr2.toArray //可变数组转不可变数组 arr2.toArray 返回结果才是一个不可变数组,arr2 本身没有变化arr1.toBuffer 返回结果才是一个可变…...
int 与 Integer 的区别详解
1. 本质区别 特性intInteger类型基本数据类型(Primitive)包装类(Wrapper Class)存储位置栈(或作为对象成员在堆中)堆(对象实例)默认值0null(可能导致 NullPointerExcept…...
初阶数据结构(3)顺序表
Hello~,欢迎大家来到我的博客进行学习! 目录 1.线性表2.顺序表2.1 概念与结构2.2 分类2.2.1 静态顺序表2.2.2 动态顺序表 2.3 动态顺序表的实现初始化尾插头插尾删头删查找指定位置之前插入数据删除指定位置的数据销毁 1.线性表 首先我们需要知道的是,…...
智能DNS解析:解决高防IP地区访问异常的实战指南
摘要:针对高防IP在部分地区无法访问的问题,本文设计基于智能DNS的流量调度方案,提供GeoDNS配置与故障切换代码示例。 一、问题背景 运营商误拦截或线路波动可能导致高防IP在福建、江苏等地访问异常。传统切换方案成本高,智能DNS可…...
瑞芯微RK3568嵌入式AI项目实战:项目方向(三)
基于RK3568的成熟开源项目和实战资源丰富,以下是针对小白的精选推荐及学习路径规划,结合多个开源项目和详细教程,帮助快速入门嵌入式开发: 一、OpenHarmony智能设备开发 1. 凌蒙派-RK3568开发板项目 项目特点:支持Op…...
go游戏后端开发26:红中麻将发牌逻辑
首先,麻将游戏创建房间的逻辑与之前我们做过的“赢三张”创建房间的逻辑是一致的,整体上没有问题。不同之处在于,我们在创建房间时会根据游戏类型来创建对应的“game”,即创建的是麻将的“game”。大家之前写过相关代码࿰…...
DataFrame的遍历、排序、去重与分组
一.遍历 1.1 series遍历 import pandas as pds pd.Series([a,b,c,d,e,f],index[1,2,3,4,5,6])for i in s:print(i) a b c d e f 可见,遍历series会直接拿到其中的值 1.2 DataFrame遍历 1.2.1 直接遍历 import pandas as pd data {name: [Alice, Bob, Charlie]…...
QEMU源码全解析 —— 块设备虚拟化(17)
接前一篇文章:QEMU源码全解析 —— 块设备虚拟化(16) 本文内容参考: 《趣谈Linux操作系统》 —— 刘超,极客时间 《QEMU/KVM源码解析与应用》 —— 李强,机械工业出版社 《KVM实战 —— 原理、进阶与性能调优》—— 任永杰 程舟,机械工业出版社...
Java 中使用 File 类创建文件
文章目录 Java 中的 File 类一、文件(File)定义 二、File 类的介绍1 创建文件对象的相关构造器2 createNewFile() 的作用3 获取文件相关信息的常用方法4 目录的操作和文件的删除 Java 中的 File 类 在 Java 中,文件和文件流是处理数据输入/输…...
PowerBI-按钮过滤筛选-宜宾五粮液股份有限公司财务分析
下面为Powerbi制作的财务主题数据分析模版,以可视化的效果展示了某股份有限公司的财务关键指标数据,如营业收入、净利润、毛利率和净利率等。以瀑布图的方式展示了利润表项目金额情况,以树图方式展示了企业资产负债数据。另外图表可以进行筛选…...
【PyQt5】QSS样式表如何使用
在 PyQt5 中,使用 QSS(Qt Style Sheets)来为窗口中的各个控件添加样式是非常方便的,类似于 HTML 中的 CSS。你可以通过 QWidget.setStyleSheet() 方法应用 QSS 样式,或者通过 .qss 文件来设置样式。 基本步骤…...
数据结构:用生活中的例子解释 AOE 网中活动的最早和最迟开始时间的含义和计算方法
生活实例:装修房子中的活动安排 假设你要装修一套房子,主要流程如下: 拆旧(活动 A,3 天) → 拆旧完成(事件 X)水电改造(活动 B,4 天) → 水电完…...
第二篇:系统分析师——7-11章
目录 一、目标二、计划三、完成情况四、意外之喜(最少2点)1.计划内的明确认知和思想的提升标志2.计划外的具体事情提升内容和标志 五、总结 一、目标 通过参加考试,训练学习能力,而非单纯以拿证为目的。 1.在复习过程中,训练快速阅读能力、掌…...
二十七- Scala
抽象属性和方法 1. 基本语法: 定义抽象类:abstract class Person{} //通过 abstract 关键字标记抽象类 定义抽象属性:val|var name:String //一个属性没有初始化,就是抽象属性 定义抽象方法:def hello():String //…...
轨检探伤专用一体机平板电脑:为铁路安全保驾护航
在铁路轨道检测领域,高效、精准的探伤设备是保障列车安全运行的核心工具。鲁成伟业针对轨检探伤小车的严苛需求,推出了多款高性能专用一体机平板电脑,以创新的技术设计和卓越的适应性,成为行业标杆解决方案。以下从产品性能、技术…...
2018年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析
2018年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛(China Undergraduate Mathematical Contest in Modeling)是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动,目的在于激励学生学习数学的积极性,提高学…...
Python数据爬取
一.example1包下的 注意:需要在终端安装pip3 install -i https://requests.readthedocs.io/en/latest/ requests 1.Python网络爬虫初探-get请求 import requests rrequests.get(https://www.baidu.com) print(r.text) r1requests.get(https://www.jd.com) print…...
【详细解析:如何在小程序中实现动态二维码和预约信息展示】
背景介绍 随着小程序的快速发展,二维码已成为很多线上线下场景中必不可少的工具。在这篇文章中,我将分享如何在小程序中实现一个动态生成二维码并展示预约信息的功能。我们会使用 Vue 和 uni-app 框架,结合自定义的 API,来获取预…...
信息学奥赛一本通 1929:【04NOIP普及组】火星人 | 洛谷 P1088 [NOIP 2004 普及组] 火星人
【题目链接】 ybt 1929:【04NOIP普及组】火星人 洛谷 P1088 [NOIP 2004 普及组] 火星人 【题目考点】 1. 深搜回溯 2. STL next_permutation函数 头文件<algorithm> 函数定义:next_permutation(lb, ub, cmp) lb:区间下界ÿ…...
mysql8.0.29 win64下载
mysql win64安装包 mysql win64安装包下载 mysql win64安装包下载 通过网盘分享的文件:mysql 链接: https://pan.baidu.com/s/1sEOl-wSVtOG5gfIRdt5MXw?pwdgi7i 提取码: gi7i...
C++笔记-string(下)
这篇我们自己来简单实现一下string类中的各个接口,来帮助我们更好地理解string类接口的底层原理。 1.构造函数和析构函数 对于构造函数我们要写两种情况:空字符串和非空字符串 因为我们要自己实现string类,所以就不能用std命名空间…...
Android studio学习之路(六)--真机的调试以及多媒体照相的使用
多媒体应用(语言识别,照相,拍视频)在生活的各个方面都具有非常大的作用,所以接下来将会逐步介绍多媒体的使用,但是在使用多媒体之前,使用模拟器肯定是不行的,所以我们必须要使用真机…...
Airflow集成Lark机器人
🥭1. 实现目标 🕐 通过自定义函数,实现Lark机器人告警功能 🕐 通过Lark机器人代替邮件数据的发送功能 🥭2.自定义函数实现 from airflow import DAG from airflow.operators.python_operator import PythonOperator from airflow.models import Variable import requ…...
【电视软件】小飞电视v2.7.0 TV版-清爽无广告秒换台【永久更新】
软件介绍 小飞电视是一款电视端的直播软件,无需二次付费和登录,资源丰富,高清流畅。具备开机自启、推送功能、自定义直播源、个性化设置及节目预告等实用功能,为用户带来良好的观看体验。基于mytv开源项目二改,涵盖央…...
2025年- H1-Lc109-160. 相交列表--java版
1.题目描述 2.思路 “双指针切换链表头” 思路一:双指针路径对齐 while (pA ! pB) { pA (pA null) ? headB : pA.next; pB (pB null) ? headA : pB.next; } 让两个指针走相同的总路径长度! 设: 链表 A 独有部分长度是 lenA 链表 B …...