24.登录权鉴和代码优化19-07-09
2019-07-09 本文已影响0人
你坤儿姐
代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第24次提交。
功能:只有用户登录后才能使用写文章功能页面。
1.到pages目录下创建write文件夹,并在文件夹下创建index.js文件,到App.js中配置路由
import Write from './pages/write';
<Route path='/write' exact component={Write}></Route>
2.到commen目录下的header中的index下,添加Link跳转到write下,
<Link to='/write'>
<Button className='writting'>
<i className="iconfont"></i>
写文章
</Button>
</Link>
3.在write的index中获取login的状态值,判断如果登录就进入 写文章页 显示<div>写文章页面</div>
如果没有登录则跳转到登录页。
import React, { PureComponent } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
class Write extends PureComponent {
render(){
const{ loginStates }=this.props;
if (loginStates){
return(
<div>写文章页面</div>
)}else {
return <Redirect to='/login'/>
}
}
}
const mapStateToProps = (state) => ({
loginStates: state.getIn(['login','login'])
});
export default connect(mapStateToProps,null)(Write);