路由守衛(wèi)
- 只有當(dāng)用戶已經(jīng)登錄并擁有某些權(quán)限時(shí)才能進(jìn)入某些路由
- 一個(gè)由多個(gè)表單組件組成的向?qū)В缱粤鞒搪樯眩脩糁挥性诋?dāng)前路由的組件填寫了滿足要求的信息才可以導(dǎo)航 到下一個(gè)路由
- 當(dāng)用戶未執(zhí)行保存操作而試圖離開當(dāng)前導(dǎo)航時(shí)提醒用戶
這是angular都有現(xiàn)成的方法
苦了react了
react-router實(shí)現(xiàn)過程
- 判斷 cookies 是用戶是否登陸，沒有登陸津坑，返回false
- 跳轉(zhuǎn)到登陸頁
- 返回true
- 跳轉(zhuǎn)相應(yīng)的頁面
const AuthExample = () => (
<Router>
<div>
<ul>
<li><Link to="/public">Public Page</Link></li>
<li><Link to="/protected">Protected Page</Link></li>
</ul>
<Route path="/public" component={Public}/>
<Route path="/login" component={Login}/>
<PrivateRoute path="/protected" component={Protected}/>
</div>
</Router>
)
const PrivateRoute = ({ component: Component, ...abc }) => {
return (
<Route {...abc} render={props => (
fakeAuth.isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login'
}}/>
)
)}/>
)}
fakeAuth 一般都是cookies 或者 localstorage 他是true，那就跳到對應(yīng)的組件
知識點(diǎn)
- react-router 4.0+ Route 幾種添加組件的方法
- react-router 路由也是組件
- 路由跳轉(zhuǎn)的幾種方式 Redirect history.push('/')
Prompt
這個(gè)好像沒有實(shí)際作用眉反，表單有沒有，react表單都是state綁定
