一.背景分析
有的页面需要登录后才能访问,比如,项目后台首页、内容管理等(除了登录页面,其他页面需要登录才能访问),因此,就需要对项目进行登录访问控制,让需要登录才能访问的页面,必须在登录后才能访问。在没有登录时,直接跳转到登录页面,让用户进行登录。
二.解决方案
路由基本格式: <Route path="/login" component={组件}>
使用render函数格式: <Route path="/login" render={() => { return <组件/>} }>
在route中使用render函数返回任意的结构
<Route path="/home" render={()=>{
// 用有无 token 判断是否登录
const token = getToken()
if(token) {
return <Layout></Layout>
} else {
return <Redirect to="/login"><Redirect>
}
}
三.render函数路由封装
1.原始页面,自定义一个路由接收原始参数:
import AuthRoute from './components/AuthRoute'
<AuthRoute path="/home" component=