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)
相关推荐
硅谷工具人1 天前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
whltaoin2 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
Baklib梅梅2 天前
2025文档管理软件推荐:效率、安全与协作全解析
前端·ruby on rails·前端框架·ruby
一只猪皮怪53 天前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Stanford_11063 天前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
千叶寻-4 天前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
家里有只小肥猫4 天前
react 初体验2
前端·react.js·前端框架
前端达人5 天前
「React实战面试题」:React.memo为什么失效了?
前端·javascript·react.js·前端框架·ecmascript
snowbitx5 天前
一篇文章彻底搞懂前端架构层面分层设计
前端·设计模式·前端框架