react項(xiàng)目中實(shí)現(xiàn)登錄注冊(cè)簡(jiǎn)單粗暴感悟

全局安裝react官方推薦腳手架 create-react-app

npm install create-react-app -g

創(chuàng)建react項(xiàng)目

create-react-app react-login-register

進(jìn)入項(xiàng)目并運(yùn)行

npm start

image.png

安裝此demo中各種依賴

  npm install antd-mobile -S  // UI框架
  npm install redux -S  // redux
  npm install react-redux -S  // react-redux
  npm install react-router-dom -S  // react路由
  npm install axios -S // react請(qǐng)求交互
  npm install redux-thunk -S // redux中間件 配合redux解決異步問(wèn)題
  npm install babel-plugin-transform-decorators-legacy -D // 配合react-redux 支持@裝飾器
  npm install mongoose -D // 安裝mondoose MongoDB數(shù)據(jù)庫(kù)插件
  npm install express -S // 基于node開(kāi)發(fā)，搭建請(qǐng)求環(huán)境
  npm install babel-plugin-import -S antd-mobile按需加載babel插件
  npm install body-parser -S  后臺(tái)數(shù)據(jù)接口用戶傳進(jìn)來(lái)的參數(shù)解析插件
  npm install cookie-parser -S 通過(guò)cookie存儲(chǔ)用戶登錄狀態(tài)
  PS: 合并安裝飛起來(lái)~

  npm run eject // 釋放react關(guān)于webpack的封裝配置
  sudo brew install mongodb（我這里是mac安裝方式，其他平臺(tái)可百度下）

刪掉 src目錄下面所有文件并新建index.js

 // index.js
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <div>Demo</div>,
    document.getElementById('root')
)

image.png

在src目錄新建一下文件和文件夾

image.png

components 放置組件
containers 放置頁(yè)面
redux 放置redux元素集合文件（定義各種常量，reducers, create actions）
reducer.js 集合redux里面各種文件

image.png

containers 新建登錄注冊(cè)兩個(gè)頁(yè)面基本內(nèi)容

import React, {Component} from 'react'

class Login extends Component {
    render() {
        return (
            <div>登錄頁(yè)面</div>
        )
    }
}

export default Login

redux 新建user.redux.js

export function user(state=0,action) {
    switch (action.type) {
        default:
            return state;
    }
}

reducer.js 引入user.redux.js 并合并

import {combineReducers} from 'redux'

import {user} from './redux/user.redux'

export default combineReducers({user})

components 新建 checkLogin 判斷用戶是否登錄

import {Component} from 'react';
import {withRouter} from 'react-router-dom'

@withRouter
class CheckLogin extends Component {
    componentDidMount() {
         // 在這里請(qǐng)求相關(guān)接口判斷用戶是否完成登錄
        axios.get('xxxxx')
            .then(res => {
                if(res.status === 200) {
                    if(res.data.code === 0) {

                    }else {
                        this.props.history.push('/login')
                    }
                }
            })
    }
    render() {
        return null;
    }
}

export default CheckLogin;

index.js完成登錄注冊(cè)準(zhǔn)備工作

import React from 'react'
import ReactDOM from 'react-dom'

// 配合applyMiddleware解決redux異步問(wèn)題
import thunk from 'redux-thunk'

// createStore接受reducer生成stote compose合并生成store其他數(shù)據(jù) applyMiddleware接受thunk解決redux異步問(wèn)題
import {createStore, compose, applyMiddleware} from 'redux'

// Provider負(fù)責(zé)傳遞store
import {Provider} from 'react-redux'

// 引入react-router-dom各種路由元素
import {BrowserRouter as Router, Route} from 'react-router-dom'

// 引入判斷是否登錄組件
import CheckLogin from './components/checkLogin/CheckLogin'

// 引入頁(yè)面路由組件
import Login from './containers/login/login'
import Register from './containers/register/register'

// 生成store
import reducer from './reducer'

const store = createStore(reducer, compose(
    applyMiddleware(thunk), //解決redux異步問(wèn)題
    window.devToolsExtension ? window.devToolsExtension() : f => f // chrome控制臺(tái)redux工具
))

// 頁(yè)面渲染
ReactDOM.render(
    <Provider store={store}>
        <Router>
            <div className="react-login-register">
                    <CheckLogin></CheckLogin>
                    <Route path='/login' component={Login}></Route>
                    <Route path='/register' component={Register}></Route>
            </div>
        </Router>
    </Provider>,
    document.getElementById('root')
)

從控制臺(tái)，可以看到redux相關(guān)信息（user: 定義的reducer user 值是返回state的初始值0）
PS：前提是chrome安裝redux插件Redux DevTools

image.png

在package.json的babel里添加一下插件

 "plugins": [
      "transform-decorators-legacy", // 配合react-redux 的connent 支持裝飾器寫法
      [
          "import",
          {
            "libraryName": "antd-mobile",
            "style": "css"
          }
      ] // antd-mobile 按需加載
  ]

接下來(lái)完善登錄注冊(cè)頁(yè)面的UI 和基本交互邏輯

登錄頁(yè)面

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

  class Login extends Component {
      render() {
          return (
              <div className="page-login">
                  <Logo />
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <List>
                      <InputItem>lbj-賬號(hào)</InputItem>
                      <InputItem>lbj-密碼</InputItem>
                  </List>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WingBlank>
                      <Button type="primary">登錄</Button>
                      <WhiteSpace></WhiteSpace>
                      <Button onClick={this.handleGoRegister.bind(this)} type="primary">去注冊(cè)</Button>
                  </WingBlank>
              </div>
          )
      }
      /*
      *     去注冊(cè)
      * */
      handleGoRegister() {
          this.props.history.push('/register');
      }
  }

  export default Login

注冊(cè)頁(yè)面

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

  class Register extends Component {
      constructor(props) {
          super(props);
          this.state = {
              username: '', //賬號(hào)
              pwd: '', // 密碼
              pwdConfirm: '', // 確認(rèn)密碼
              type: 'worker', // 用戶類型 默認(rèn)求職者
          }
      }

      render() {
          const RadioItem = Radio.RadioItem
          return (
              <div className="page-register">
                  <Logo/>
                  <List>
                      <InputItem onChange={value => this.handleChange('username', value)}>lbj-賬號(hào)</InputItem>
                      <InputItem onChange={value => this.handleChange('pwd', value)}>lbj-密碼</InputItem>
                      <InputItem onChange={value => this.handleChange('pwdConfirm', value)}>lbj-確認(rèn)</InputItem>
                  </List>
                  <WhiteSpace></WhiteSpace>
                  <List>
                      <RadioItem
                          onClick={() => this.handleChange('type', 'worker')}
                          checked={this.state.type === 'worker'}>牛人    </RadioItem>
                      <RadioItem
                          onClick={() => this.handleChange('type', 'boss')}
                          checked={this.state.type === 'boss'}>BOSS</RadioItem>
                  </List>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WingBlank>
                      <Button type="primary">登錄</Button>
                      <WhiteSpace></WhiteSpace>
                      <Button onClick={this.handleGoLogin.bind(this)} type="primary">已有賬號(hào)，去登錄</Button>
                  </WingBlank>
              </div>
          )
      }

      /*
      *     去登錄
      * */
      handleGoLogin() {
          this.props.history.push('/login')
      }

      /*
      *     綁定表單值
      * */
      handleChange(key, val) {
          this.setState({
              [key]: val
          })
      }
  }

  export default Register

下一步，就是搭建數(shù)據(jù)庫(kù)，之前安裝的MongoDB，mongoose, express派上了用場(chǎng)

項(xiàng)目根目錄下面新建server文件夾
文件夾下面新建server.js和user.js
server.js

const express = require('express');
const userRouter = require('./user')

// 新建app
const app = express();

app.use('/user',userRouter)

app.listen(8000, () => {
    `server is running at port 8000 success~~~`
})

user.js

const express = require('express')

// 生成express路由中間件
const Router = express.Router();

// CheckLogin.js 用戶查詢用戶是否登錄的接口
Router.get('/info', (req, res) => {
    return res.json({code: 1,msg: '未登錄'})
})

module.exports = Router

進(jìn)入server文件夾 運(yùn)行

npm install nodemon -g   // nodemon 是基于node的實(shí)時(shí)監(jiān)聽(tīng)的工具
nodemon server.js

image.png

在checkLogin.js里面請(qǐng)求user/info 來(lái)判斷是否登錄
繼續(xù)完善 checkLogin

import {Component} from 'react';
import {withRouter} from 'react-router-dom'  // 由于checkLogin 不是路由，要想用跳轉(zhuǎn)的話得引入withRouter

@withRouter
class CheckLogin extends Component {
    componentDidMount() {
        // 登錄注冊(cè)兩個(gè)頁(yè)面不需要判斷
        if(filterCheck.indexOf(this.props.location.pathname) > -1) {
            return;
        }
         // 在這里請(qǐng)求相關(guān)接口判斷用戶是否完成登錄
        axios.get('/user/info')
            .then(res => {
                if(res.status === 200) {
                    if(res.data.code === 0) {
                              
                    }else {
                        this.props.history.push('/login')
                    }
                }
            })
    }
    render() {
        return null;
    }
}

export default CheckLogin;

中場(chǎng)休息完繼續(xù)

通過(guò)上面的checkLogin，訪問(wèn)其他頁(yè)面在沒(méi)有登錄的情況下，自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面。

從注冊(cè)頁(yè)面開(kāi)始完善
因?yàn)轫?xiàng)目是結(jié)合redux來(lái)操作，所以登錄注冊(cè)都是生成各種action,通過(guò)之前寫好的user這個(gè)reducer來(lái)改變state的初始值

在注冊(cè)頁(yè)面寫好register方法并導(dǎo)出給注冊(cè)按鈕調(diào)用，從而生成action，給reducer使用

// user.redux.js
import axios from 'axios'  // 用axios做請(qǐng)求

// 定義常量
const REGISTER_SUCCESS = 'REGISTER_SUCCESS'; // 注冊(cè)成功
const TODO_ERRSHOW = 'TODO_ERRSHOW'; // 操作失敗

// state初始值
let initState = {
    redirectTo: '', // 完成之后跳到哪里
    username: '', // 賬號(hào)
    pwd: '', // 密碼
    pwdConfirm: '', // 確認(rèn)密碼
    type: '', // 用戶類型
    msg: '', // 錯(cuò)誤消息
    isLogin: false // 是否登錄
}

export function user(state=initState,action) {
    switch (action.type) {
       case REGISTER_SUCCESS:
            return {...state,...action.data, msg: '', redirectTo: '/login'}
       case TODO_ERRSHOW:
            return {...state,msg: action.msg}
       default:
            return state;
    }
}

function registerFail(msg) {
    return {
        msg,
        type: TODO_ERRSHOW
    }
}

function registerSuccess(data) {
    return {
        data,
        type: REGISTER_SUCCESS
    }
}

// register是一個(gè)action creator ，返回的action供user這個(gè)reducer使用，從而改變state
export function register({username,pwd,pwdConfirm,type}) {
    if(!username || !pwd) {
        registerFail('賬號(hào)密碼不能為空')
    }
    if(pwd !== pwdConfirm) {
        registerFail('兩次密碼不一致')
    }
    return dispatch => {
        axios.post('/user/register',{username,pwd,type})
            .then(res => {
                if(res.status === 200 && res.data.code === 0) {
                    dispatch(registerSuccess(res.data.data))
                }else {
                    dispatch(registerFail(res.data.msg))
                }
            })
    }
}

接下來(lái)在register.js里面的注冊(cè)按鈕綁定的事件調(diào)用register這個(gè)方法

// register.js
import {connect} from 'react-redux'
import {register} from '../../redux/user.redux'
import Logo from '../../components/logo/logo'

@connect(
    state=> state,
    {register}
)

注意上面幾行代碼，之前在package.json提到的plugins transform-decorators-legacy是為上面的connect裝飾器支持@寫法準(zhǔn)備的。

裝飾器connnect接受兩個(gè)參數(shù)，給props定義的數(shù)據(jù)和函數(shù)

// 注冊(cè)按鈕綁定的事件
/*
*   注冊(cè)
* */
handleRegister() {
    this.props.register(this.state)
}

因?yàn)樵趓egister這個(gè)函數(shù)里面，做了表單驗(yàn)證判斷后開(kāi)始請(qǐng)求“/user/register”這個(gè)接口，那么接下來(lái)完善這個(gè)接口

登錄注冊(cè)的接口設(shè)計(jì)到數(shù)據(jù)庫(kù)，這里選用了mongoDB這種類型的數(shù)據(jù)庫(kù)最為后臺(tái)數(shù)據(jù)支撐

新建數(shù)據(jù)模型

// server/model.js
const mongoose = require('mongoose')

// mongoose 連接這個(gè)數(shù)據(jù)庫(kù)并生成"react-login-register"這個(gè)集合
mongoose.connect('mongodb://127.0.0.1:27017/react-login-register')

// 連接成功后的打印
mongoose.connection.on('connected',() => {
    console.log('mongo connect success');
})

// 創(chuàng)建數(shù)據(jù)模型
const models = {
    user: {
        'username': {type:String, require: true}, // 賬號(hào)
        'pwd': {type:String, require: true}, // 密碼
        'type': {type:String, require: true} // 用戶類型
    }
}

// 遍歷生成數(shù)據(jù)模型
for (let m in models) {
    mongoose.model(m, new mongoose.Schema(models[m]))
}

// 導(dǎo)出供其他地方獲取
module.exports = {
    getModel: function (m) {
        return mongoose.model(m)
    }
}

// server/user.js
// 獲取注冊(cè)用戶列表
Router.get('/list',(req,res) => {
    //清空所有用戶
    // User.remove({},(err,doc) => {
    //  if(!err) {
    //      console.log(`用戶清空成功`);
    //  }
    // })
    // 在user這個(gè)數(shù)據(jù)模型中查詢所有用戶
    User.find({},(err,doc) => {
        if(!err) {
            return res.json({code: 0, data: doc,msg: '用戶列表獲取成功'})
        }
    })
})

完成注冊(cè)接口

// user.js
const express = require('express')
const model = require('./model')
const User = model.getModel('user')
// md5加密
const utils = require('utility')

// 生成express路由中間件
const Router = express.Router();

// 封裝MD5加密規(guī)則
function my_md5(pwd) {
    const xiao = 'akdf352FHhjfFHI34=123-`.WRL23K23fhKJFHkhFJ@1231!*@%!^';
    return utils.md5(utils.md5(xiao + pwd))
}

//過(guò)濾調(diào)不想暴露的數(shù)據(jù)
const _filter = {"__v": 0, "pwd": 0}

// CheckLogin.js 用戶查詢用戶是否登錄的接口
Router.get('/info', (req, res) => {
    return res.json({code: 1, msg: '未登錄'})
})

// 獲取注冊(cè)用戶列表
Router.get('/list', (req, res) => {
    //清空所有用戶
    // User.remove({}, (err, doc) => {
    //  if (!err) {
    //      console.log(`用戶清空成功`);
    //  }
    // })

    // 在user這個(gè)數(shù)據(jù)模型中查詢所有用戶
    User.find({}, (err, doc) => {
        if (!err) {
            return res.json({code: 0, data: doc, msg: '用戶列表獲取成功'})
        }
    })
})

// 注冊(cè)接口
Router.post('/register', (req, res) => {
    const {username, pwd, type} = req.body;
    // 在user這個(gè)數(shù)據(jù)模型中查詢用戶注冊(cè)的賬號(hào)是否存在
    User.findOne({username}, (err, doc) => {
        //
        if (doc) {
            return res.json({code: 1, msg: '用戶已存在'})
        }
        if (err) {
            return res.json({code: 1, msg: '服務(wù)器異常'})
        }
        User.create({username, pwd: my_md5(pwd), type}, (err, doc) => {
            if (err) {
                return res.json({code: 1, msg: '服務(wù)器異常'})
            }
            return res.json({code: 0, data: doc})
        })
    })
})


module.exports = Router
// 這里注意，因?yàn)橐邮軈?shù)，所以在server.js安裝body-parser并app.use(bodyParser.json())

register.js

{this.props.user.redirectTo ? <Redirect to={this.props.user.redirectTo}></Redirect>:null} //注冊(cè)完成后跳轉(zhuǎn)到登錄頁(yè)面
<div className="err-show">{this.props.user.msg ? this.props.user.msg : ''}</div> //顯示錯(cuò)誤信息

至此注冊(cè)部分基本完成

繼續(xù)

接下來(lái)完成登錄部分

大致思路是綁定事件

// login.js
/*
 *  登錄
 * */
handleLogin() {
    this.props.login(this.state)
}

定義執(zhí)行調(diào)用actions creator

// login.js
import {connect} from 'react-redux'

@connect (
    state => state,
    {login}
)

編寫login actions creator

// user.redux.js
// 登錄時(shí)候調(diào)用
export function login({username,pwd}) {
    if(!username || !pwd) {
        return toDoFail('賬號(hào)密碼不能為空')
    }
    return dispatch => {
        axios.post('/user/login',{username,pwd})
            .then(res => {
                if(res.status === 200 && res.data.code === 0) {
                    dispatch(loginSuccess(res.data.data))
                }else {
                    dispatch(toDoFail(res.data.msg))
                }
            })
    }
}

編寫user/login這個(gè)接口

 // user.js
 Router.post('/login', (req, res) => {
    const {username, pwd} = req.body;
    console.log(username);
    User.findOne({username, pwd: my_md5(pwd)}, _filter, (err, doc) => {
        if (!doc) {
            return res.json({code: 1, msg: '賬號(hào)密碼不正確'})
        }
        if (err) {
            return res.json({code: 1, msg: '服務(wù)器異常'})
        }
        res.cookie('userId',doc._id) // 登錄成功保存cookie
        return res.json({code: 0, msg: '登錄成功', data: doc})
    })
})

登錄的步驟和注冊(cè)部分很多相似之處
接下來(lái)，完善判斷用戶是否登錄的接口，'/user/info'

// user.js
Router.get('/info', (req, res) => {
    const {userId} = req.cookies
    if (!userId) {
        res.json({code: 1, msg: '用戶未登錄'})
    }
    User.findOne({_id: userId}, _filter, (err, doc) => {
        if (err) {
            return res.json({code: 1, msg: '服務(wù)器異常'})
        }
        if (doc) {
            return res.json({code: 0, msg: '用戶已登錄',data: doc})
        }
    })
})
PS: server.js 記得使用cookie插件
const cookieParser = require('cookie-parser')
app.use(cookieParser())

最后，我們?cè)诘卿浲瓿芍笏M(jìn)入的頁(yè)面展示用戶的基本信息

// checkLogin.js
axios.get('/user/info')
  .then(res => {
      console.log(res);
      if(res.status === 200) {
          if(res.data.code === 0) {
              this.props.getUserInfo(res.data.data)
          }else {
              this.props.history.push('/login')
          }
      }
  })


// user.redux.js
// 登錄之后獲取用戶信息
export function getUserInfo(userInfo) {
    return {
        type: GET_USER_INFO,
        payload: userInfo
    }    
}

對(duì)此次demo完善退出登錄
跳轉(zhuǎn)到login頁(yè)面，清空cookies

// workerInfo.js
import React, {Component} from 'react';
import {connect} from 'react-redux'
import {Button,WingBlank} from 'antd-mobile'
import {Redirect} from 'react-router-dom'
import {loginOut} from '../../redux/user.redux'

@connect(
    state => state,
    {loginOut}
)

class WorkerInfo extends Component {
    render() {
        return (
            <div>
                {this.props.user.redirectTo ? <Redirect to={this.props.user.redirectTo}></Redirect>:null}
                <h3>worker信息頁(yè)面</h3>
                <p>用戶名稱:{this.props.user.username} </p>
                <p>用戶類型:{this.props.user.type} </p>
                <WingBlank>
                    <Button onClick={this.handleLoginOut.bind(this)} type="primary">退出登錄</Button>
                </WingBlank>
            </div>
        );
    }
    /*
    *   退出登錄
    * */
    handleLoginOut() {
        this.props.loginOut();
    }
}

export default WorkerInfo;

編寫退出登錄action creator

// 退出登錄調(diào)用
export function loginOut() {
    return dispatch => {
        axios.get('/user/loginOut')
                .then(res => {
                if (res.status === 200 && res.data.code === 0) {
                    dispatch(loginOutSuccess(res.data.data))
                } else {
                    dispatch(toDoFail(res.data.msg))
                }
            })
    }
}

編寫退出登錄接口

// user.js
// 退出登錄
Router.get('/loginOut', (req, res) => {
    const {userId} = req.cookies;
    if(!userId) {
        res.json({code: 1, msg: '服務(wù)器異常'})
    }
    res.cookie('userId','');
    return res.json({code: 0, msg:'退出成功'})
})

到此整個(gè)demo寫完

留下一個(gè)報(bào)錯(cuò)信息，但是對(duì)功能沒(méi)有影響

登錄或退出成功或注冊(cè)成功進(jìn)行頁(yè)面跳轉(zhuǎn)后，會(huì)報(bào)錯(cuò)
Warning: You tried to redirect to the same route you're currently on: "/workerInfo"
Warning: You tried to redirect to the same route you're currently on: "/bossInfo"
Warning: You tried to redirect to the same route you're currently on: "/login"
后續(xù)解決~~ 帶理解~