react实现登录注册

登录注册页面都分为上下两个部分，其中上部是logo，下部分是输入框，所以抽离出来三个组件

logo

import React from 'react'
import logoImg from './job.png'
import './logo.css'

class Logo extends React.Component{
render(){
return (
<div className="logo-container">
<img className="logo-img" src={logoImg} alt=""/>
</div>
)
}
}

export default Logo

login

import React from 'react'
import Logo from '../../component/logo/logo.js'
import {List,InputItem,WingBlank,WhiteSpace,Button} from 'antd-mobile'

class Login extends React.Component{
constructor(props){
super(props);
//绑定this时间，如果不绑定，无法传递this
this.register = this.register.bind(this);
}
register(){
console.log(this.props);
//跳转到注册页面
this.props.history.push('/register')
}
render(){
return (
<div>
<Logo></Logo>
<h2>我是登录页</h2>
<WingBlank>
<List>
<InputItem>用户名</InputItem>
<InputItem type="password">密码</InputItem>
</List>
<WhiteSpace/>
<Button type="primary">登录</Button>
<WhiteSpace/>
<Button onClick={this.register} type="primary">注册</Button>
</WingBlank>
</div>
)
}
}

export default Login

register

import React from 'react'
import Logo from '../../component/logo/logo'
import {List,InputItem,WingBlank,WhiteSpace,Button,Radio} from 'antd-mobile'
import {connect} from 'react-redux'
import {register} from '../../redux/user.redux'
import '../../index.css'

@connect(
state => state.user,
{register}
)
class Register extends React.Component{
constructor(props){
super(props);
this.state = {
user:'',
pwd:'',
repeatpwd:'',
type:'genius',
}
this.handleRegister = this.handleRegister.bind(this)
}
//调用redux/user.redux中的register方法，判断是否可以注册
handleRegister(){
this.props.register(this.state)
// console.log(this.state);
}
//监控输入框的变化，及时更新state中的值
handleChange(key,val){
this.setState({
[key]:val
})
}
render(){
const RadioItem = Radio.RadioItem
return (
<div>
<Logo></Logo>
<WingBlank>
<List>
{this.props.msg?<p className="error-msg">{this.props.msg}</p>:null}
<InputItem onChange={v=>this.handleChange('user',v)}>用户名</InputItem>
<InputItem onChange={v=>this.handleChange('pwd',v)} type="password">密码</InputItem>
<InputItem onChange={v=>this.handleChange('repeatpwd',v)} type="password">确认密码</InputItem>
<RadioItem onChange={()=>this.handleChange('type','genius')} checked={this.state.type=='genius'}>
牛人
</RadioItem>
<RadioItem onChange={()=>this.handleChange('type','boss')} checked={this.state.type=='boss'}>
boss
</RadioItem>
</List>
<WhiteSpace/>
<Button type="primary" onClick={this.handleRegister}>注册</Button>
<WhiteSpace/>
</WingBlank>
</div>
)
}
}

export default Register

authroute 是用来判断输入的链接地址是否符合要求以及用户登录情况，进而判断是否跳转

import React from 'react'
import axios from 'axios'
import {withRouter} from 'react-router-dom'

//进行判断是否登陆并进行路由跳转
@withRouter
class AuthRoute extends React.Component{
componentDidMount(){
const publicList = ['/login','/register']
const pathname = this.props.location.pathname
//判断输入的链接是否符合要求
if(publicList.indexOf(pathname)>-1){
return null
}
//获取用户信息
axios.get('/user/info').then(res=>{
//判断是否登录，如果没有登录，则跳转到登录界面
if(res.status==200){
if(res.data.code==0){

}else{
this.props.history.push('/login')
}
console.log(res.data);
}
})
//用户状态：是否登陆
//现在的URL地址 login是不需要跳转的
//用户的身份是boss还是牛人
//用户是否完善信息（头像，简介）
}
render(){
return null
}
}
export default AuthRoute

转载于:https://www.cnblogs.com/tis100204/p/10442685.html