React开发实时聊天招聘工具 -第六章 登陆注册(1)

1.基于cookie的用户认证

express 依赖 cookie-parser

 

 

2.axios语法:

 

axios.get('/data').then(res=>{

         if(res.status==200){

                      if(res.data.code==0)

                        {

                           ..........

                        }

           }

})

 

 

 

 

3.非route组件通过@withRouter包裹组件获取props中属性(比如要使用this.props.history.push)

sd

 

 

总结一下:

登陆页面:

先用antd-mobile做好UI，

点击注册的时候会history.push()到注册页

在index.js中所有Route前有一个AuthRoute组件 组件

AuthRoute组件在ComponentDidMount时会判断this.props.location.pathname,如果是register或者login页面就return null

 

如果不是两者之一就开始axios请求后端，请求是否有登陆信息(后期要用cookie实现)

axios.get('/data').then(function(res){   if(res.status ==200){  if...  } })

 

注册页面:

注册页面Register组件维护了一个user的state

 

输入的时候会把数据用onChange监听放置到state中

 

user.redux.js:

redux相关信息是这样的:

 

reducer是这样的:

 

action（行为）是注册成功和注册失败（报错）

 

 

 action creator是这样的

 

点击注册按钮后是这样的结果:

register函数定义在user.redux.js中: