react由于没有自行设置路由守卫。所以登录和退出时需要自己判断是否获得token值并且做出登录和退出的路由跳转操作。首先我们通过接口获得token值。
window.sessionStorage.setItem('token',res.data.token)
// console.log(sessionStorage.getItem('token'));
if(sessionStorage.getItem('token')){
//刷新页面用来重新渲染app节点
window.location.reload(true)
}
然后在app.js中判断是否获得token值。以便做路由切换。
render(){
return sessionStorage.getItem('token') ? (
<Router>
<Frame>
<Switch>
<Route path='/admin' exact component={Admin}></Route>
<Route path='/houseList' exact component={houseList}></Route>
<Route path='/addhouseList' exact component={addHouseList}></Route>
<Route path='/userlist' exact component={UserList}></Route>
<Route path='/userpower' exact component={UserPower}></Route>
<Route path='/houseimg' exact component={houseImg}></Route>
<Route path='/houseanalyse' exact component={houseAnalyse}></Route>
</Switch>
</Frame>
</Router>
):(
<Router>
<Switch>
<Route path='/login' exact component={Login}></Route>
<Redirect to='/login' />
</Switch>
</Router>
)
}
如果获得token切换到frame嵌套路由。如果没获得token则重定向到login页面。退出登录直接移除sessionStorge,并再次自动刷新页面退出登录。
<Button
type="primary"
icon={<PoweroffOutlined />}
onClick={()=>{
sessionStorage.removeItem('token')
if(!sessionStorage.getItem('token')){
window.location.reload(true)
}}
style={{position:'absolute',right:'20px',top:'20px'}}
>
退出登录
</Button>
这里用的antd的组件。也可以不使用。