React 守卫路由

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

javascript 复制代码
// 导入重定向的路由模块
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里导入并使用:

javascript 复制代码
// 导入路由鉴权组件
import {Auth} from './components/Auth'

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

javascript 复制代码
<Route path='/'element={ <Auth><Home/></Auth> }></Route)
相关推荐
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
Baklib梅梅6 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
布兰妮甜11 小时前
彻底清理:Vue项目中移除static文件夹的完整指南
vue.js·前端框架·static·1024程序员节
yongui4783413 小时前
B树和B+树的解析应用
数据结构·b树·前端框架
sulikey14 小时前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
sulikey18 小时前
Qt 入门简洁笔记:信号与槽
前端·c++·笔记·qt·前端框架·1024程序员节·qt框架
正经教主20 小时前
【Trae+AI】Express框架01:教程示例搭建及基础原理
前端框架·express
im_AMBER2 天前
React 03
前端·笔记·学习·react.js·前端框架·react
大数据张老师2 天前
数据结构——B树及其基本操作
数据结构·b树·前端框架
尘世中一位迷途小书童2 天前
Vuetify Admin 后台管理系统
前端·前端框架·开源