用react写登录页

2019-08-13 10:49:26 qq_37674616 阅读数 952

需求

作为一个前端码农,对于登录页面和相关业务已经熟烂于心。今天我们一起从登录出发,看我们能学到什么?

提示:下面采用 react+typescirpt+scss 环境书写

结果截图如下
在这里插入图片描述

原始做法

从react视角出发,我们可能会在pages文件夹下创建如下结构:
在这里插入图片描述
sin-in.component.tsx

import React from 'react'

import './sign-in.style.scss'
export default class SignIn extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            email: '',
            password: ''
        }
        this.handleInput = this.handleInput.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this)

    }
    handleInput(e: React.FormEvent) {
        const { value = '', name = '' } = e.target as any;
        this.setState({
            [name]: value
        })
    }
    handleSubmit(e: React.FormEvent) {
        e.preventDefault();

        console.log(this.state);
    }
    render() {
        const { email, password } = this.state;
        return (
            <div className="sign-in">
                <h2>I already have an account</h2>
                <span>Sign in with your email and passowrd</span>

                <form onSubmit={this.handleSubmit}>
               	<div className='group'>
                  <input 
                  		className='form-input' 
                   		type="email"
                        name='email'
                        value={email}
                        required
                        onChange={this.handleInput}
                 />
                  <label
                  	className={`${value.length?'shrink':''} form-input-label`}
                  >Email</label>
                 <input 
                		className='form-input' 
                 		type="password"
                        name='password'
                        value={password}
                        onChange={this.handleInput}
                        required
                 />
                  <label
                  className={`${value.length?'shrink':''} form-input-label`}
                  >Password</label>
                  </div>
                   <button className='custom-button' type='submit' >Sign in</button>
                </form>
            </div>
        )
    }
}

一个文件一把梭,浏览器运行一看,嗯… 不错 就是太丑了…

$sub-color:grey;
$main-color:black;
@mixin shrinkLabel {
    top:-14px;
    font-size: 12px;
    color:$main-color
}

.sign-in{
    width: 30vw;
    display: flex;
    flex-direction: column;
   justify-content: center;
   .group{
    position: relative;
    margin:45px 0;
    
    .form-input{
        background: none;
        background-color: white;
        color:$sub-color;
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border:none;
        border-radius: 0;
        border-bottom: 1px solid $sub-color;
        margin:25px 0;

        &:focus{
            outline: none;
        }
        &:focus ~ .form-input-label{
            @include shrinkLabel()
        }
    }
    
    input[type='password']{
        letter-spacing: 0.3em;
    }

   .form-input-label{
       color:$sub-color;
        font-size: 16px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: 300ms ease all;

        &.shrink{
            @include shrinkLabel()
        }
	 }
  }
  .custom-button{
    min-width: 165px;
    width: auto;
    height: 50px;
    letter-spacing:0.5px;
    line-height: 50px;
    padding: 0 35px 0 35px;
    font-size: 15px;
    background-color: black;
    color:white;
    text-transform: uppercase;
    font-weight:bolder;
    border: none;
    cursor: pointer;

    &:hover{
        background-color: white;
        color:black;
        border:1px solid black;
    }
  }
}

组件化后

看到sin-in.component.tsx文件过于冗余,并且部分控件不能复用,样式也不能复用…下面就是抽离组件:
新建components文件夹目录结构如下:

  • components
    • custom-button
      • custom-button.component.tsx
      • custom-button.style.scss
    • form-input
      • form-input.component.tsx
      • form-input.style.scss

form-input.component.tsx

import React from 'react'
import './form-input.style.scss'

type IProps=Readonly<{
    type:string;
    name:string;
    value:string;
    labelName:string;
    required:boolean;
    onChange:(e:any)=>void;
}>;

const FormInput = ({labelName,...otherProps}:IProps) => {
    return (
        <div className='group'>
            <input className='form-input' {...otherProps}/>
            {
                labelName? 
                (<label className={`${otherProps.value.length?'shrink':''} form-input-label`}>{labelName}</label>)
                :null
            }
           
        </div>
    )
}
export default FormInput;

form-input.style.scss

$sub-color:grey;
$main-color:black;
@mixin shrinkLabel {
    top:-14px;
    font-size: 12px;
    color:$main-color
}

.group{
    position: relative;
    margin:45px 0;
    
    .form-input{
        background: none;
        background-color: white;
        color:$sub-color;
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border:none;
        border-radius: 0;
        border-bottom: 1px solid $sub-color;
        margin:25px 0;

        &:focus{
            outline: none;
        }
        &:focus ~ .form-input-label{
            @include shrinkLabel()
        }
    }
    
    input[type='password']{
        letter-spacing: 0.3em;
    }

    .form-input-label{
        color:$sub-color;
        font-size: 16px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: 300ms ease all;

        &.shrink{
            @include shrinkLabel()
        }
    }
   
}

custom-button.component.tsx

import React from 'react'
import './custom-button.style.scss'

const CustomButton = ({children,...otherProps}:any) => {
    return (
        <button
        {...otherProps}
         className='custom-button'>
            {children}
        </button>
    )
}
export default CustomButton

custom-button.syle.scss

.custom-button{
    min-width: 165px;
    width: auto;
    height: 50px;
    letter-spacing:0.5px;
    line-height: 50px;
    padding: 0 35px 0 35px;
    font-size: 15px;
    background-color: black;
    color:white;
    text-transform: uppercase;
    font-weight:bolder;
    border: none;
    cursor: pointer;

    &:hover{
        background-color: white;
        color:black;
        border:1px solid black;
    }
}

下面我我们回到pages文件夹下的 sign-in目录中
sign-in.component.tsx

import React from 'react'
import FormInput from '../form-input/form-input'
import CustomButton from  '../custom-button/custom-button.component'
import './sign-in.style.scss'

export default class SignIn extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            email: '',
            password: ''
        }
        this.handleInput = this.handleInput.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this)

    }
    handleInput(e: React.FormEvent) {
        const { value = '', name = '' } = e.target as any;
        this.setState({
            [name]: value
        })
    }
    handleSubmit(e: React.FormEvent) {
        e.preventDefault();

        console.log(this.state);
    }
    render() {
        const { email, password } = this.state;
        return (
            <div className="sign-in">
                <h2>I already have an account</h2>
                <span>Sign in with your email and passowrd</span>

                <form onSubmit={this.handleSubmit}>
                    <FormInput
                        type="email"
                        name='email'
                        value={email}
                        labelName='Email'
                        required
                        onChange={this.handleInput}
                    />
                    <FormInput
                        type="password"
                        name='password'
                        labelName='Password'
                        value={password}
                        onChange={this.handleInput}
                        required
                    />
                   <CustomButton type='submit'>Sign in</CustomButton>
                </form>
            </div>
        )
    }
}

sign-in.style.scss

.sign-in{
    width: 30vw;
    display: flex;
    flex-direction: column;
   justify-content: center;
}

总结

  1. 我们应该写尽可能小的组件,要符合组件职责单一
  2. 将组件抽离后我们可能做到组件的复用
  3. 更加灵活,对于组件样式修改和组件组合都会更加灵活
2019-07-03 16:08:21 linjiru1191 阅读数 23809

效果图如下:

1.首先把需要bind的事件保存在一个数组里面,这样不需要每次都要绑定

const eventsArr = [
    //按钮点击事件
    "onSignIn",
    //user name输入改变
    "onChangeName",
    //password输入改变
    "onChangePwd"
];

2.SignIn类的构造方法

constructor(props) {
        super(props);
        //一次性绑定所有事件,这样以后添加的事件只要添加到eventArr数组里面就好了
        eventsArr.map((ev) => {
            this[ev] = this[ev].bind(this);
            return "";
        });

        this.state = {
            name: '',
            pwd: '',
            errorMsg:''
        };
    }

3.Sign In按钮点击事件,可以判断是否是有效用户,有效用户跳转到下一个页面,否则提示错误信息

//用来模拟数据库得到的用户的账户和密码信息
const owners = [
    { name: "demo", pwd: "123456" },
    { name: "oliver",pwd: "123456"}
]
onSignIn() {
        var authorizd = false;
        //这里做个简单的用户登录验证,后面可以通过数据库读取数据来验证
        owners.map((value, index) => {
            if (this.state.name === value.name && this.state.pwd === value.pwd) {                
                authorizd = true;
            }
        });
        if (authorizd) {
            //跳转到主页面
            this.props.history.push("home");            
        }
        else {
            this.setState({
                errorMsg: "Incorrect username or password."
            });
        }
    }

4.name和password两个文本框事件

onChangeName(event, value) {
        this.setState({ name: value });
        this.setState({ errorMsg: '' });
    }

    onChangePwd(event, value) {
        this.setState({ pwd: value });
    }

5.页面的主要UI部分

render() {
        return (
            <Container className="signin-body">
                <Row>
                    <Col md={{ size: 4, offset: 4 }}>
                        <div className="signin-title">
                            Sign in to Oliver Demo
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col md={{ size: 4, offset: 4 }}>
                        <div className="signin-content">
                            <TextField label="User Name" Value={this.state.name} errorMessage={this.state.errorMsg} onChange={this.onChangeName} />
                            <TextField label="Password" value={this.state.pwd} type="Password" onChange={this.onChangePwd} />
                            <DefaultButton className="signin-button" text="Sign In" onClick={this.onSignIn} />
                        </div>
                    </Col>
                </Row>
            </Container>
        );
    }

6.主要引入的库如下来完成界面的UI布局

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Container, Row, Col } from 'reactstrap';
import '../../css/SignIn.css';

7.SignIn.css中css简单样式,其他主要还是用react相关库来使用相关组件的默认样式

.signin-body{
    padding:50px 0;
}

.signin-title{
    text-align:center;
    margin-bottom: 20px;
    font-size:24px;
}

.signin-content{
    padding:10px;
    background-color:#ffffff;
    border-radius:5px;
    border: 1px solid #d1d2d3;
}

.signin-button {
    margin-top: 20px;
    width: 100%;
    background-color: #319da0;
    color: #ffffff;
    border-radius: 5px;
}

自己写css样式还是比较麻烦,后面主要会用office-ui-fabric微软官方提供的样式,这样会省去大量写css样式的时间

2017-02-08 14:02:22 awaw00 阅读数 42223

仔细想想,我们的后台系统还没有一个登录功能,太不靠谱,赶紧把防盗门安上!

SPA的鉴权方式和传统的web应用不同:由于页面的渲染不再依赖服务端,与服务端的交互都通过接口来完成,而REASTful风格的接口提倡无状态(state less),通常不使用cookie和session来进行身份认证。

比较流行的一种方式是使用web token,所谓的token可以看作是一个标识身份的令牌。客户端在登录成功后可以获得服务端加密后的token,然后在后续需要身份认证的接口请求中在header中带上这个token,服务端就可以通过判断token的有效性来验证该请求是否合法。

我们先来改造一下服务端,实现一个简单的基于token的身份认证(可直接复制代码,无需关心具体实现)

改造服务端

先在根目录下执行npm i json-server -D,虽然一开始以全局的方式安装过json-server这个工具,但本次要在代码中使用json-server的api,需要将其安装为项目依赖。

然后新建/server/auth.js文件,写入以下代码:

const expireTime = 1000 * 60;

module.exports = function (req, res, next) {
  res.header('Access-Control-Expose-Headers', 'access-token');
  const now = Date.now();

  let unauthorized = true;
  const token = req.headers['access-token'];
  if (token) {
    const expired = now - token > expireTime;
    if (!expired) {
      unauthorized = false;
      res.header('access-token', now);
    }
  }

  if (unauthorized) {
    res.sendStatus(401);
  } else {
    next();
  }
};

新建/server/index.js文件,写入以下代码:

const path = require('path');
const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router(path.join(__dirname, 'db.json'));
const middlewares = jsonServer.defaults();

server.use(jsonServer.bodyParser);
server.use(middlewares);

server.post('/login', function (req, res, next) {
  res.header('Access-Control-Expose-Headers', 'access-token');
  const {account, password} = req.body;
  if (account === 'admin' && password === '123456') {
    res.header('access-token', Date.now());
    res.json(true);
  } else {
    res.json(false);
  }
});

server.use(require('./auth'));
server.use(router);

server.listen(3000, function () {
  console.log('JSON Server is running in http://localhost:3000');
});

修改/package.json文件中的scripts.server

{
  ...
  "scripts": {
    "server": "node server/index.js",
    ...
  },
  ...
}

然后使用npm run server重启服务器。

现在我们的服务器就拥有了身份认证的功能,访问除了’/login’外的其它接口时,服务端会根据请求的header中access-token来判断请求是否有效,如果无效则会返回401状态码。

当客户端收到401的状态码时,需要跳转到登录页面进行登录,有效的管理员账号为admin,密码为123456。

以POST方法提交下面的参数到’http://localhost:3000/login‘接口,就能够完成登录。

{
  "account": "admin",
  "password": "123456"
}

登录成功后,接口返回true,并且在返回的headers中包含了一个有效的access-token,用于在后面的请求中使用;登录失败则返回false

access-token的有效期为1分钟,每次有效的接口请求都会获得新的access-token;若1分钟内没有做操作,则会过期需要重新登录。

我们的access-token只是一个简单的timestamp,且没有做任何加密措施。

封装fetch

由于我们每个接口的请求都需要加上一个名为access-token的header,在每次需要调用接口的时候都写一遍就非常的不明智了,所以我们需要封装fetch方法。

新建/src/utils/request.js,写入以下代码:

import { hashHistory } from 'react-router';

export default function request (method, url, body) {
  method = method.toUpperCase();
  if (method === 'GET') {
    // fetch的GET不允许有body,参数只能放在url中
    body = undefined;
  } else {
    body = body && JSON.stringify(body);
  }

  return fetch(url, {
    method,
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Token': sessionStorage.getItem('access_token') || '' // 从sessionStorage中获取access token
    },
    body
  })
    .then((res) => {
      if (res.status === 401) {
        hashHistory.push('/login');
        return Promise.reject('Unauthorized.');
      } else {
        const token = res.headers.get('access-token');
        if (token) {
          sessionStorage.setItem('access_token', token);
        }
        return res.json();
      }
    });
}

export const get = url => request('GET', url);
export const post = (url, body) => request('POST', url, body);
export const put = (url, body) => request('PUT', url, body);
export const del = (url, body) => request('DELETE', url, body);

request方法封装了添加access-token头等逻辑,然后就可以在需要调用接口的时候使用request或get、post等方法了,比如/src/components/BookEditor.js

...
import request, {get} from '../utils/request';

class BookEditor extends React.Component {
  ...
  handleSubmit (e) {
    ...

    let editType = '添加';
    let apiUrl = 'http://localhost:3000/book';
    let method = 'post';
    if (editTarget) {
      ...
    }

    request(method, apiUrl, {
      name: name.value,
      price: price.value,
      owner_id: owner_id.value
    })
      .then((res) => {
        if (res.id) {
          ...
        } else {
          ...
        }
      })
      .catch((err) => console.error(err));
  }

  getRecommendUsers (partialUserId) {
    get('http://localhost:3000/user?id_like=' + partialUserId)
      .then((res) => {
        if (res.length === 1 && res[0].id === partialUserId) {
          return;
        }
        ...
      });
  }
  ...
}
...

其它还有/src/components/UserEditor.js/src/pages/BookEdit.js/src/pages/BookList.js/src/pages/UserEdit.js/src/pages/UserList.js文件需要进行相应的修改。

实现登录页面

现在尝试访问一下用户列表页,发现表格里面并没有数据,因为没有登录接口访问被拒绝了并且尝试跳转到路由’/login’。

现在来实现一个登录页面组件,在/src/pages下新建Login.js文件;

import React from 'react';
import HomeLayout from '../layouts/HomeLayout';
import FormItem from '../components/FormItem';
import { post } from '../utils/request';
import formProvider from '../utils/formProvider';

class Login extends React.Component {
  constructor () {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit (e) {
    e.preventDefault();

    const {formValid, form: {account, password}} = this.props;
    if (!formValid) {
      alert('请输入账号或密码');
      return;
    }

    post('http://localhost:3000/login', {
      account: account.value,
      password: password.value
    })
      .then((res) => {
        if (res) {
          this.context.router.push('/');
        } else {
          alert('登录失败,账号或密码错误');
        }
      })
  }

  render () {
    const {form: {account, password}, onFormChange} = this.props;
    return (
      <HomeLayout title="请登录">
        <form onSubmit={this.handleSubmit}>
          <FormItem label="账号:" valid={account.valid} error={account.error}>
            <input type="text" value={account.value} onChange={e => onFormChange('account', e.target.value)}/>
          </FormItem>
          <FormItem label="密码:" valid={password.valid} error={password.error}>
            <input type="password" value={password.value} onChange={e => onFormChange('password', e.target.value)}/>
          </FormItem>
          <br/>
          <input type="submit" value="登录"/>
        </form>
      </HomeLayout>
    );
  }
}

Login.contextTypes = {
  router: React.PropTypes.object.isRequired
};

Login = formProvider({
  account: {
    defaultValue: '',
    rules: [
      {
        pattern (value) {
          return value.length > 0;
        },
        error: '请输入账号'
      }
    ]
  },
  password: {
    defaultValue: '',
    rules: [
      {
        pattern (value) {
          return value.length > 0;
        },
        error: '请输入密码'
      }
    ]
  }
})(Login);

export default Login;

登录页面组件和UserEditor或者BookEditor类似,都是一个表单。

在这里提交表单成功后跳转到首页。

最后,别忘了加上登录页面的路由。

最终效果

2017-02-17 18:01:57 ddwhan0123 阅读数 24912

转载请注明出处:王亟亟的大牛之路

继续本周的大方向,继续学习React,昨天把简单的hi all内容呈现出来后,今天研究如何多页面或者实现页面嵌套,
开始今天的内容前老规矩,先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android


在传统的静态网页里,我们页面跳转通过超级链,页面重定向,转发等等姿势来解决多页面展示和逻辑跳转,而React对这部分做了很好的封装,也做成了 主件。

要是用也是国际惯例,npm下!!

npm install -S react-router

下完后直接import就可以使用,像这样

import { Router, Route, hashHistory } from 'react-router';

Router是大壳子,类似于路由容器的东西

Route是具体实施路由的对象

hashHistory表示路由切换的hash值,决定最终结果


因为直接的项目结构比较建的随意,所以把目录进行了重新整理,把main.js变成一个大容器,不做任何业务主件使用,像这样。

这里写图片描述

这一部分 react官方的例子写的很详细很棒,大家也可以看https://github.com/reactjs/react-router-tutorial,或者把他的demo跑一跑 豁然开朗。


上面提到了router其实和使用常规主件一样倒入,使用即可最基本的也就是以下这种形式

<Router><<Router>

我们先来写一个简单的页面

首先是昨天的ui搬家到了新的first.js

import React from 'react';
import styled from 'styled-components';
import { Router, Route, hashHistory } from 'react-router';

const Input = styled.input`
  font-size: 1.25em;
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;
  background: papayawhip;
  border: none;
  border-radius: 3px;

  &:hover {
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
  }
`;
const H1 = styled.h1`
  background-color: #a1a
`;

export default React.createClass({
  render() {
    return (
      <div>
          <Input placeholder="@mxstbr" type="text" />
          <H1>i am first h1</H1>
      </div>
    );
  }
})

然后在我们的main.js调用他

import React from 'react';
import { render } from 'react-dom';
import { Router , Route , hashHistory } from 'react-router';
import first from './first';


render((
  <Router history={hashHistory}>
    <Route path="/" component={first}/>
  </Router>
), document.getElementById('app'))

我们倒入了 first和react-router所用到的相关对象
Router容器下有一个Route节点会让我们的页面中多出first部分的内容

长这样

这里写图片描述

那我如果要路由到其他页面呢?

那我们来建一个页面来让他渲染

two.js

import React from 'react';
import styled from 'styled-components';

const H3= styled.h3`
  background-color: #a11
`;
export default React.createClass({
  render(){
    return (
      <H3>i am two h3</H3>
    );
  }
})

这是一个最基本的页面,就不解释了(建议手打,找找手感)

需要修改的知识main.js里的render部分

render((
  <Router history={hashHistory}>
    <Route path="/" component={first}></Route>
    <Route path="/two" component={two}/>
  </Router>
), document.getElementById('app'))

浏览器输入http://localhost:8080/#/two 看看效果吧

因为主件可以是单一控件,也可以是试图组,所以Router也是,它可以嵌套多个<route>

新建一个 three.js试试吧

import React from 'react';
import styled from 'styled-components';

const H2 = styled.h2`
  color: #eee
`;

export default React.createClass({
  render(){
    return(
      <H2>i am three H2</H2>
    )
  }
})

页面和two.js一样所以可以copy下。

我们强行让three嵌套入first

修改如下

render((
  <Router history={hashHistory}>
    <Route path="/" component={first}>
      <Route path="/three" component={three}/>
    </Route>
    <Route path="/two" component={two}/>
  </Router>
), document.getElementById('app'))

其实现在的内容就是

<first>
    <three></three>
</first>

输入http://localhost:8080/#/three看看吧

这里写图片描述

这一篇简单的介绍下这一套姿势如何简单的使用,其实react大多数功能都是如此,封装的简单易用,下一篇还会讲 路由相关

周末愉快!!!

2019-02-27 11:44:00 weixin_30628801 阅读数 295

登录注册页面都分为上下两个部分,其中上部是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