一、使用场景
限制某个页面在登录的情况下访问
二、说明
在React路由中并没有提供该组件,需要手动封装,来实现登录访问控制(类似于Vue路由的导航路由守卫)
三、实现步骤
在components目录下,创建AuthRoute/index.js文件
判断token是否存在,即判断是否登录
登录时,自己渲染对应页面组件
未登录时,重定向到登录页面,并传入跳转前的路由信息
登录成功后,判断是否需要跳转到用户想要访问的页面(判断location.state是否有值)
如果不需要(没有值),则直接调用navigate(-1)返回上一页
如果需要,就跳转到location.state.pathname指定的页面,使用replace方法模式
四、代码实现
AuthRoute/index.js
import React from 'react'
import { Navigate, useLocation } from 'react-router-dom'
export default function AuthRoute({component}) {
const location =useLocation()
if(localStorage.getItem('token')){
//已登录
//如果有token,跳转该组件包裹的页面
return <>{component}</>
}else{
//未登录
//跳转去登录页面
return <Navigate to="/login"
state={location}
/>
}
}
在路由表中配置routes/index.js
{
path:'/rent',
element:<AuthRoute component=<Rent/>></AuthRoute>
},
Login/index.js
const navigate = useNavigate()
const location=useLocation()
//登录成功后,判断是否需要跳转到用户想要访问的页面(判断location.state是否有值)
if(location.state){
//如果需要,就跳转到location.state.pathname指定的页面,使用replace模式
navigate(location.state.pathname,{ replace: true })
}else{
//如果不需要(没有值),则直接调用navigate(-1)返回上一页
navigate(-1)
}