react 路由鉴权

server/2024/12/27 2:56:37/

权限路由一般两种
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.ppmy.cn/server/147603.html

相关文章

十五、linux之搭建JavaEE环境

1 概述 如果需要在 Linux 下进行 JavaEE 的开发&#xff0c;我们需要安装如下软件 2 安装 JDK 安装步骤 mkdir /opt/jdk mkdir /opt/jdk通过 xftp6 上传到 /opt/jdk 下 cd /opt/jdk 解压 tar -zxvf jdk-8u261-linux-x64.tar.gz tar -zxvf jdk-8u261-linux-x64.tar.…

加密算法学习笔记

可逆与不可逆 可逆 对称加密与非对称加密 不可逆 解释:一旦加密就不能反向解密得到密码原文 种类: Hash散列算法, 散列算法, 摘要算法等&#xff08;哈希算法又称散列算法&#xff09; 用途&#xff1a;一般用于效验下载文件正确性&#xff0c;一般在网站上下载文件都能见到…

开发手札:Win+Mac下工程多开联调

最近完成一个Windows/Android/IOS三端多人网络协同项目V1.0版本&#xff0c;进入测试流程了。为了方便自测&#xff0c;需要用unity将一个工程打开多次&#xff0c;分别是Win/IOS/Android版本&#xff0c;进行多角色联调。 在Win开发机上&#xff0c;以Windows版本为主版…

华为NPU服务器昇腾Ascend 910B2部署通义千问Qwen2.5——基于mindie镜像一路试错版(三)

文章目录 前言纯模型推理启动服务后面干什么?这可咋整啊?愁死了!总结前言 这是咱这个系列的第三个文章了。 毕竟,这是我好几天摸索出的经验,能帮助各位在几个小时内领会,我觉得也算是我的功劳一件了。 所以,一是希望大家耐心看下去,耐心操作下去;而是恳请各位多多关…

深度学习中的图片分类:VGG16 模型详解及代码实现

深度学习中的图片分类&#xff1a;VGG16 模型详解及代码实现 在深度学习的发展中&#xff0c;VGG16 是一个非常经典且重要的卷积神经网络&#xff08;CNN&#xff09;架构。尽管它已经不如一些更现代的网络&#xff08;如 ResNet 和 EfficientNet&#xff09;那么流行&#xf…

微服务通讯系统(2)

软件设计及核心代码展示 数据库表设计&#xff0c;ES搜索表设计&#xff0c;Redis键值对设计 数据库表设计 &#xff08;1&#xff09;用户表设计 这里的ID是指的是在系统中用户是第几个注册的&#xff08;从1开始&#xff09; user_id是指用户的唯一ID是通过uuid()函数生成…

数学建模之熵权法

熵权法 概述 **熵权法(Entropy Weight Method,EWM)**是一种客观赋权的方法&#xff0c;原理&#xff1a;指标的变异程度越小&#xff0c;所包含的信息量也越小&#xff0c;其对应的权值应该越低&#xff08;例如&#xff0c;如果对于所有样本而言&#xff0c;某项指标的值都相…

spark同步mysql数据到sqlserver

使用Apache Spark将数据从MySQL同步到SQL Server是一个常见的ETL&#xff08;Extract, Transform, Load&#xff09;任务。这里提供一个基本的步骤指南&#xff0c;以及一些代码示例来帮助你完成这项工作。 ### 前提条件 1. **安装Spark**&#xff1a;确保你的环境中已经安装了…