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)