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啥都想搞