路由守卫授权
学习视频1——参考第8分钟, 13分钟
使用 react router-dom
来解决这个问题
1
|
cnpm i --save-dev react-router-dom
|
1
2
3
4
5
6
|
import IndexRouter from './router/IndexRouter'
function App() {
return <div>
<IndexRouter></IndexRouter>
</div>
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import React from 'react'
import {HashRouter} from 'react-router-dom'
import Login from './Login.js'
export default function IndexRouter() {
return (
<HashRouter>
<Switch>
<Route path="/login" component={Login} />
<Route path="/" component={NewSandBox} />
</Switch>
</HashRouter>
)
}
|
我们使用 Switch
组件,这样就只能匹配一个路由
未授权 重定向实现方法
路由拦截的方法
参考视频 第 20分钟
1
2
3
4
5
6
7
8
9
10
11
|
export default function IndexRouter() {
return (
<HashRouter>
<Switch>
<Route path="/login" component={Login} />
<Route path="/" render={()=>{localStorage.getItem("token")?<Box/>:<Redirect to="/login" /> }} />
</Switch>
</HashRouter>
)
}
|