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)