React 守卫路由

devtools/2024/11/14 6:38:39/

1.在components文件夹下新建一个Auth.js的文件,里面写入判断token的逻辑:

// 导入重定向的路由模块
import { Navigate } from "react-router-dom"
// 获取本地token
let token = window.sessionStorage.getItem('token')
function Auth({children}){    
//如果token存在返回内容
if(token){       return <>{children}</>    }else{      return <Navigate to="/Login" replace></Navigate>  }
}
export {Auth}

2.在App.js里导入并使用:

// 导入路由鉴权组件
import {Auth} from './components/Auth'

3.需要鉴权的路由组件用Auth组件包裹,那么这个路由在没有token的情况下就会强制跳转到登录:

<Route path='/'element={ <Auth><Home/></Auth> }></Route)


http://www.ppmy.cn/devtools/133418.html

相关文章

Qt | QMediaPlayer+QGraphicsVideoItem视频播放器

点击上方"蓝字"关注我们 01、上节回顾 Qt | windows视频播放器小项目

Bert框架详解(下)

一、Bert模型网络结构 1、Add与Normalize Add&#xff1a;将前面的数据传到后面层&#xff0c;残差网络同理。 Normalize &#xff1a;归一化&#xff0c;与batch normalize同理。 2、outputs(shifted right) outputs&#xff08;shifted right&#xff09;&#xff1a;指在…

C++之SET容器

set 是 C STL (Standard Template Library) 中的一个关联容器。它存储唯一的元素&#xff0c;并且这些元素是自动排序的&#xff08;默认情况下为升序&#xff09;。set 内部通常实现为红黑树&#xff0c;这是一种自平衡二叉搜索树。 主要特点 唯一性&#xff1a;set 容器不允…

Intern大模型训练营(四):使用Hugging Face下载模型

1. Huggingface下载模型 首先在Huggingface平台注册账号。 然后进入https://github.com/codespaces&#xff0c;选择使用jupyter_notebook配置&#xff0c;输入以下命令流安装香瓜依赖。 # 安装transformers pip install transformers4.38 pip install sentencepiece0.1.99 …

图像处理椒盐噪声

椒盐噪声&#xff0c;也称为脉冲噪声&#xff0c;是图像中经常见到的一种噪声。它是一种随机出现的白点或者黑点&#xff0c;可能是亮的区域有黑色像素或是在暗的区域有白色像素&#xff08;或是两者皆有&#xff09;。这些白点和黑点会在图像中随机分布&#xff0c;导致图像中…

Python与Excel交互:pandas库安装及基本用法

在之前的文章中&#xff0c;我们探讨了Python处理Excel文件的基本概念&#xff0c;如工作簿、工作表以及单元格等。现在我们将转向具体的工具介绍——pandas库&#xff0c;它是Python中最常用的数据分析库之一&#xff0c;能够非常便捷地读取、处理和写入Excel文件。 安装pand…

Nano Energy 水下机器人近场感知与速度评估由深度学习辅助的仿海豹胡须传感器实现

摘要&#xff1a;本研究设计了一种仿生水下摩擦电胡须传感器&#xff0c;可被动感知多种水动力流场&#xff0c;有望成为水下航行器在本地导航任务中的整合工具。 北京大学与大连海事大学研究团队共同设计了一种深度学习辅助的仿生水下摩擦电胡须传感器&#xff08;underwater…

【计算机图形学】3DIT的训练数据总结

3D Implicit Transporter用的是PartNet-Mobility数据集&#xff0c;我想用Shape2Motion数据集&#xff0c;但是3DIT是所有类别的数据扔一起训练的&#xff0c;为了避免到时候弄3DIT数据忘记了&#xff0c;我在这里记录一些点云数据训练的东西。方便之后用3DIT来训练BaseLine 1…