dva开发一个cnode网站(6)

完善路由权限控制和登陆逻辑。
因为没有后台接口，所以写了个假数据，来获取登陆用户数据

1 修改Login组件，加入验证逻辑以及登陆逻辑

import React , { Component }from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Form, Icon, Input, Button, Checkbox} from 'antd';
import { message } from 'antd';
import { routerRedux } from 'dva/router';

const backgroundImage = require('../assets/back.jpg');
const FormItem = Form.Item;

class Login extends Component{

  handleSubmit = (e) => {
 e.preventDefault();
 const {dispatch} = this.props
 this.props.form.validateFields((err, values) => {
   if (!err) {
     const { userName,password } = values
     dispatch({ type: 'user/login', payload: { userName,password } })
   }
 });
}

    render() {
      const { getFieldDecorator,getFieldError } = this.props.form

      return (
        <div  style={styles.form}>
           <h1>登陆</h1>
           <Form onSubmit={this.handleSubmit}>
           <FormItem>
           {getFieldDecorator('userName', {
           rules: [{ required: true, message: '请输入用户名' },
         {max:20,message: '最大长度不能超过20'}],
         })(
              <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" />
         )}
           </FormItem>
           <FormItem>
           {getFieldDecorator('password', {
           rules: [{ required: true, message: '请输入密码' },
         {pattern:/^(?![^a-zA-Z]+$)(?!\D+$)/,message: '密码必须包含数字和字母'},
       {min:6,message: '最小长度为6位'},
     {max:12,message: '最大长度12位'},],
         })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
         )}

           </FormItem>
           <FormItem>
             <Checkbox>记住我</Checkbox>
               <Button block type="primary"  onClick={this.handleSubmit}>
                 登陆
               </Button>
             <a>忘记密码</a>
             或 <a href="#/reg">注册!</a>
           </FormItem>
         </Form>

    </div>
      )

    }

    componentWillMount () {
      if(this.props.state.user.isLogin) {
         this.props.dispatch(routerRedux.push('/'))
      }
   }
}

const styles = {
  form: {
    maxWidth: '400px',
    margin: '0 auto',
    paddingTop: '100px',
  }
};

Login.propTypes = {

};

function mapStateToProps(state) {
 return {
   state
 }
}

// export default ListData;
export default connect(mapStateToProps)(Form.create()(Login));

主要是验证规则的书写，支持很多，可以在antd官网查看具体使用，我只是验证了些简单的，不为空，最大最小长度以及正则验证密码。
还有就是判断如果已经登陆直接跳转到首页。

2 创建userService来获取登陆用户的数据

export function getUser({ userName,password}) {
  return {
    userName: `${userName}`,
    password: `${password}`,
    job: '阿里巴巴java开发工程师',
    like: '打篮球',
    sex: '男',
    phone: '1433545345',
    blog: 'https://blog.csdn.net/elite1991',
    work:'ailibaba',
    location:'杭州阿里巴巴软件园',
    name:'mike晓',
    desp:'老夫写代码，只用jquery'
  };
}

返回的是假数据，如果你有后台接口，可以换成你自己的

3 创建usermodel来保存登陆的用户信息

import * as userService from '../services/userService';
import { routerRedux } from 'dva/router';


export default {
  namespace: 'user',
  state:{
      isLogin:false,
      user:{}
  },
    effects: {
        *login({ payload: { userName,password } }, { call, put }) {
            const result = yield call(userService.getUser, { userName,password })
               yield put({
               type: 'updateUser',
                 payload: {
                     result
                 }
             })
             yield put(routerRedux.push('/'))
        },
  },

  reducers: {
    'updateUser'(state, { payload: data }) {
        let r = data.result
        return {isLogin:true,user:r}
    }
  },

};

注意登陆完后使用routerRedux跳转到首页。然后别忘了注册usermodel，这样简单的登陆功能就完成了。

4 创建AuthRouter权限路由父组件

使用它来包裹子路由，在父组件进行登陆判断，如果没有登陆就redirect到首页

import React, { Component } from 'react'
import { connect } from 'dva';
import { Router, Route, Redirect, withRouter } from 'dva/router';
import { message } from 'antd';

class AuthRouter extends Component {
    render() {
        const { component: Component, ...rest } = this.props
        const isLogged = this.props.state.user.isLogin
        if (!isLogged) {
          message.warning('您需要先登陆');
        }
        return (
            <Route {...rest} render={props => {
              return isLogged
                  ? <Component {...props} />
                  : <Redirect to="/login" />
            }} />
        )
      }
}

function mapStateToProps(state) {
 return {
   state
 }
}

// export default ListData;
export default connect(mapStateToProps)(withRouter(AuthRouter));

5 改造之前的路由，/apipath进行授权判断

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import DetailPage from './routes/DetailPage';
import NewUserPage from './routes/NewUserPage';
import ApiPage from './routes/ApiPage';
import AboutPage from './routes/AboutPage';
import LoginPage from './routes/LoginPage';
import RegPage from './routes/RegPage';
import AuthRouter from './components/AuthRouter';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/detail/:id" exact component={DetailPage} />
        <Route path="/into" exact component={NewUserPage} />
        <Route path='/about' component={AboutPage}/>
        <Route path="/login" exact component={LoginPage} />
        <Route path="/reg" exact component={RegPage} />
        <AuthRouter path='/api' component={ApiPage}></AuthRouter>
      </Switch>
    </Router>
  );
}

export default RouterConfig;

这样一来，访问/api时会跳转到登陆页，登陆完后就可以正常访问apiPage了
今天的课程就到这里了，别忘了关注我 mike啥都想搞