当前位置: 首页 > 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

相关文章:

  • ssm100医学生在线学习交流平台+vue(论文+源码)_kaic
  • 【云计算解决方案面试整理】1-2云计算基础概念及云计算技术原理
  • Vue 3 介绍及应用
  • 24.11.13 Javascript3
  • 【C#设计模式(8)——过滤器模式(Adapter Pattern)】
  • 24/11/12 算法笔记<强化学习> Policy Gradient策略梯度
  • 测试用例设计方法之边界值分析法
  • 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详解