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)
相关推荐
zhenryx6 分钟前
前端-react(class组件和Hooks)
前端·react.js·前端框架
Thomas游戏开发1 小时前
Unity3D 逻辑服的Entity, ComponentData与System划分详解
前端框架·unity3d·游戏开发
前端青山8 小时前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
沉默璇年9 小时前
react中Fragment的使用场景
前端·react.js·前端框架
Fanfffff7201 天前
React中组件通信的几种方式
前端·react.js·前端框架
前端青山1 天前
React 中的Props特性及其应用
前端·javascript·react.js·前端框架
MavenTalk2 天前
React可以做全栈开发吗
前端·react native·react.js·前端框架·全栈开发
工业3D_大熊2 天前
Web端高效BIM 3D可视化引擎HOOPS Communicator技术解析!
linux·服务器·c++·windows·3d·前端框架·c#
lzb_kkk2 天前
【Vue】创建Vue工程化项目
前端·javascript·vue.js·前端框架·1024程序员节
白菜头332 天前
前端框架Vue3基础部分
前端框架