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