react 路由鉴权

权限路由一般两种
1中接口中返回菜单
2 接口中返回权限,前端做匹配

  • 一般都是那种结合,react中没有vue那种钩子函数如何做?
在项目中写一个高阶函数,在高阶函数中判断权限、是否登录等操作app.tsx或者man.tsx中使用 《AuthRouter》 高阶函数
<HashRouter><ConfigProvider locale={i18nLocale} componentSize={assemblySize}><AuthRouter><Router /></AuthRouter></ConfigProvider></HashRouter>创建高阶函数
AuthRouter.tsx
import { Navigate, useLocation } from 'react-router-dom';import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import {searchRoute} from "@/utils/util"
import { HOME_URL } from "@/config/config";
function AutnToken(props: { children: JSX.Element }) {const userData=useSelector((state:RootState) => state.getDataConfig)const {token}=userData// 获取接口中的路由 一维数组,如果是多维需自己转一维const { authRouter } = useSelector((state: RootState) => state.auth);// rootRouter//这里可以使用接口中或者前端本地的路由数据const rootRouter: never[]=[] //// 获取当前路由信息const { pathname } = useLocation();// 获取当前路由对应的信息const route = searchRoute(pathname, rootRouter);// * 判断当前路由是否需要访问权限(不需要权限直接放行)if (!route.meta?.requiresAuth) return props.children;// * 判断是否有Tokenif (!token) return <Navigate to="/login" replace />;// * Static Router(静态路由,必须配置首页地址,否则不能进首页获取菜单、按钮权限等数据),获取数据的时候会loading,所有配置首页地址也没问题const staticRouter = [HOME_URL, "/405"];const routerList = authRouter.concat(staticRouter);// * 如果访问的地址没有在路由表中重定向到405页面if (routerList.indexOf(pathname) == -1) return <Navigate to="/405" />;// * 当前账号有权限返回 Router,正常访问页面return props.children;
}export default AutnToken

config/config中配置

默认首页地址
export const HOME_URL: string = "/home/index"; 这个是必须有的

这样就实现, 未登录token不存在、路由不存在、当前路由不在后端接口中不显示并跳转404/405页面

项目截图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Monkey操作及问题场景具体样例日志分析

目录 1. 应用崩溃 (App Crashes) 2. ANR (Application Not Responding) 3. 内存问题 (Memory Issues) 4、生成及查看日志&#xff1a; 1. 应用崩溃 (App Crashes) Monkey操作导致的场景&#xff1a; 你可以使用Monkey发送大量的点击事件、滑动操作或按键操作来模拟极端的…

k8s集群中金丝雀发布 + 声明式资源管理yaml

一、K8S常见的发布方式 旨在降低发布风险并提高发布速度 1、蓝绿发布 两套环境&#xff08;设备&#xff09;交替升级&#xff0c;旧版本保留一定时间便于回滚 优点&#xff1a;对用户无感&#xff0c;是最安全的发布方式&#xff0c;业务稳定 缺点&#xff1a;需要两套系统&…

openssl的运用

一、概述 Opssl是一个用于TLS/SSL协议的工具包&#xff0c;也是一个通用密码库。 包含了国密sm2 sm3 sm4&#xff0c;包含了对称加密&#xff0c;非对称加密&#xff0c;单项散列&#xff0c;伪随机、签名&#xff0c;密码交换&#xff0c;证书等一些算法库。 为了深层次的学习…

基于SpringBoot+Vue的靓车汽车销售网站-无偿分享 (附源码+LW+调试)

目录 1. 项目技术 2. 功能菜单 3. 部分功能截图 4. 研究背景 5. 研究目的 6. 可行性分析 6.1 技术可行性 6.2 经济可行性 6.3 操作可行性 7. 系统设计 7.1 概述 7.2 系统流程和逻辑 7.3 系统结构 8. 数据库设计 8.1 数据库ER图 &#xff08;1&#xff09;材料分…

基于飞腾S2500处理器的全国产加固服务器

近日&#xff0c;西安康德航测电子科技有限公司凭借其深厚的行业底蕴和创新精神&#xff0c;正式推出了基于飞腾S2500处理器的全国产加固服务器。这一产品的问世&#xff0c;不仅标志着我国在信息技术领域的自立自强迈出了坚实的一步&#xff0c;更以其卓越的性能、坚固的设计和…

Ubuntu源码安装gitlab13.7集群多前端《二》

Ubuntu源码安装gitlab13.7《一》 gitaly需要调整的服务 redis socket->ipbind ....* # 0.0.0.0pg vim /etc/postgresql/14/main/pg_hba.confhost all all ..../32 md5gitaly vim /home/git/gitaly/config.tomlbin_dir "/home/gi…

OpenStack-Glance组件

Glance Glance使用磁盘格式和容器格式基础配置镜像转换 Glance 是 OpenStack 的镜像服务&#xff0c;负责存储、发现和管理虚拟机镜像。它允许用户创建和共享镜像&#xff0c;用于启动虚拟机实例。 Glance 的主要功能 &#xff08;1&#xff09;虚拟机镜像的管理 支持镜像的上…

C++编程:模拟实现CyberRT的DataVisitor和DataDispatcher

文章目录 0. 引言1. 设计概要1.1 主要组件1.2 类关系图1.3 工作流程 2. 代码实现2.1. 定义数据结构2.2. 实现 DataVisitor2.3. 实现 DataDispatcher2.4. 实现 Receiver2.5. 实现具体的 DataVisitor2.6. 示例主程序2.7. 编译和运行 0. 引言 使用 C 实现一个类似CyberRT 架构的 …

求助——AssertionError: Attribute pipeline is missing from configuration.json.

我在本地运行Sunsimiao大模型的时候遇到了“AssertionError: Attribute pipeline is missing from configuration.json.”的问题。在网上找了很多问题都没有解决&#xff0c;求助一下广大网友。有什么好的解决方法吗&#xff1f; 本地环境如上所示&#xff0c;不知是哪里出…

虚幻引擎5(Unreal Engine 5)高级教程

虚幻引擎5&#xff08;Unreal Engine 5&#xff09;高级教程 引言 虚幻引擎5&#xff08;Unreal Engine 5&#xff0c;简称UE5&#xff09;是Epic Games推出的一款功能强大的游戏引擎&#xff0c;广泛应用于游戏开发、影视制作和虚拟现实等领域。UE5以其先进的图形渲染技术、…

2024年顶级小型语言模型前15名

本文&#xff0c;我们将深入了解2024年备受瞩目的十五款小型语言模型&#xff08;SLMs&#xff09;&#xff0c;它们分别是Llama 3.1 8B、Gemma2、Qwen 2、Mistral Nemo、Phi-3.5等。这些SLMs以其精巧的体积和高效率著称&#xff0c;它们不需要依赖庞大的服务器资源&#xff0c…

P3916 图的遍历(Tarjan缩点和反向建边)

P3916 图的遍历 - 洛谷 | 计算机科学教育新生态 写法一&#xff1a;Tarjan 思路&#xff1a;先运用Tarjan算法得到每个连通块中最大的编号&#xff0c;然后对每个连通块进行缩点重新建图&#xff0c;进行dfs&#xff0c;得到缩点后的连通块能够达到的最大编号。 Code: conste…

Android ConstraintLayout 约束布局的使用手册

目录 前言 一、ConstraintLayout基本介绍 二、ConstraintLayout使用步骤 1、引入库 2、基本使用&#xff0c;实现按钮居中。相对于父布局的约束。 3、A Button 居中展示&#xff0c;B Button展示在A Button正下方&#xff08;距离A 46dp&#xff09;。相对于兄弟控件的约束…

三步入门Log4J 的使用

本篇基于Maven 的Project项目&#xff0c; 快速演示Log4j 的导入和演示。 第一步&#xff1a; 导入Log4j依赖 <dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-api</artifactId><version>2.24.2</version&…

【强化学习入门笔记】1.5 贝尔曼最优公式

本系列为学习赵世钰老师的《强化学习的数学原理》所作的学习笔记. 课程视频网址&#xff1a;https://space.bilibili.com/2044042934 1.5.1 定义 1.5.1.1 Contraction mapping theorem (收缩映射定理) fixed point(不动点) 如果 x ∗ x^* x∗满足下式, x ∗ x^* x∗称之为…

Nmap脚本使用

Nmap是主机扫描工具&#xff0c;他的图形化界面是Zenmap&#xff0c;分布式框架为Dnamp。 Nmap可以完成以下任务&#xff1a; 主机探测端口扫描版本检测系统检测支持探测脚本的编写 Nmap在实际中应用场合如下&#xff1a;通过对设备或者防火墙的探测来审计它的安全性探测目标主…

linux上jdk1.8安装elasticsearch6.8.5踩坑总结

先在windows上下载了elasticsearch8安装成功后&#xff0c;本来是想在linux上也安装一个一样的版本&#xff0c;然后发现各种启动不了&#xff0c;查了一天原来jdk版本不同&#xff0c;需要下载不同版本的elasticsearch&#xff0c;我测试了8&#xff0c;7&#xff0c;6&#x…

15 - Java 面向对象(高级)

抽象类 抽象类声明 abstract class 类名 { } 用关键字 abstract 修饰的类&#xff0c;就是抽象类 抽象类使用abstract来修饰&#xff0c;抽象类不能实例化对象。抽象类中是可以写非静态的成员的&#xff0c;这时候这些非静态成员是可以继承给子类的。抽象类中是可以包含构造方…

python源码实例游戏开发小程序办公自动化网络爬虫项目开发源码(250+个项目、26.6GB)

文章目录 源代码下载地址项目介绍预览 项目备注源代码下载地址 源代码下载地址 点击这里下载源码 项目介绍 python源码实例游戏开发小程序办公自动化网络爬虫项目开发源码(250个项目、26.6GB) 预览 项目备注 1、该资源内项目代码都经过测试运行成功&#xff0c;功能ok的情…

VINS_MONO视觉导航算法【三】ROS基础知识介绍

文章目录 其他文章说明ROSlaunch文件基本概念定义用途 文件结构根标签常用标签\<node>\<param>\<rosparam>\<remap>\<include>\<arg>\<group> 示例基本示例嵌套示例 使用方法启动 *.launch 文件传递参数 总结 ROS topicTopic 的基本…