路由守卫授权

学习视频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>
)
}