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

React 守卫路由

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.kler.cn/a/389211.html

相关文章:

  • 【2024年华为OD机试】(A卷,200分)- 简单的解压缩算法 (JavaScriptJava PythonC/C++)
  • 深入剖析 Java 的本地方法接口(JNI)
  • Node.js 完全教程:从入门到精通
  • 递归练习六(普通练习11-15)
  • 探索 SolidJS:一款高速的前端框架
  • E-Prime2实现List嵌套
  • 测试用例设计方法之边界值分析法
  • Dependencies 工具
  • node 阿里云oss上传删除修改文件
  • vue3的自定义hooks怎么写?
  • 《深入浅出Apache Spark》系列③:Spark SQL解析层优化策略与案例解析
  • Redis的缓存问题与应对策略
  • 面试:TCP、UDP如何解决丢包问题
  • 探索开放资源上指令微调语言模型的现状
  • 【Kafka-go】golang的kafka应用
  • ReactPress:深入解析技术方案设计与源码
  • C++学习笔记----10、模块、头文件及各种主题(六)---- C风格可变长度参数列表
  • qt QRunnable 与 QThreadPool详解
  • 【CSS】居中样式
  • Nginx性能调优的具体策略方法
  • opcua认证测试1108 增加对三菱,西门子,modbus支持
  • PySindy学习
  • 无人机避障——(局部规划方法)DWA(动态窗口法)
  • C#开发流程
  • 1.1 算法基本概念与复杂度分析
  • qt QWebSocketServer详解